“This is the 21st day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Before we get to know the steps of configuring media query on mobile, let’s have a brief chat, or an overview of what media query is and what it does

What @media does: Media queries can use the corresponding style instead of the original style on the specified device. This simply tells the browser to invoke a style when a condition is met. When condition A is met, style A is called; B style is invoked when condition B is satisfied

A media query consists of multimedia and can contain one or more expressions. It returns true or false based on the expression condition. True is returned if the specified multimedia type matches the device type, and the document displays the CSS style effect of the specified style on the matching device.

Here are the steps for configuring media query on the mobile terminal

(1) Define the mobile port, that is, set the meta tag

<meta name="viewport" The content = "width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" / >Copy the code

Width =device-width Specifies the width of the current device initial-scale=1.0 Initial scale minimum-scale Specifies the minimum scale to which the user can scale. Maximum-scale Specifies the maximum scale to which the user can scale User-scalable Whether users can be manually scaled

Note: By default, the mobile system gives you a certain viewport width and allows you to zoom in and out, so some non-mobile PC websites can be rendered on the phone, but the content of the page will look small. So the purpose of setting the meta is to change the default Settings so that the page size matches the mobile device

(2) For IE compatible processing

I. To prevent the actual browser mode of IE from default low, it is necessary to set IE rendering mode to latest (Edge).

<meta HTTP-equiv =" x-UA-compatible "content="IE=edge">

II. IE9 below does not support HTML5 and @media, so two JS files need to be loaded to ensure the compatibility of code implementation

<! -- [if lt IE 9] > < script SRC = "https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" > < / script > <! [endif]-->Copy the code

(3) Common size of mobile terminal

Common dimensions are 320px, 480px, 640px, 768px, 960px, 1024px, 1200px and so on