CSS3 Series 4 (Media Queries Mobile Device Style)_html/css_WEB-ITnose

Viewport settings adapt to mobile device screen size

viewport: allows developers to create a virtual window and customize the size or scaling of its window

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

The content attribute in the code can be set with the following 6 different parameters

How Media Queries works

1. Define the width of the current screen visible area The maximum value is 600 pixels

<link href="small.css" rel="stylesheet"  media="screen and(max-width:600px)"/>

So how to write small.css?

@media screen and (max-width:600px) {    .demo {        background-color:red;    }}

2. Define the current screen visibility The width and length of the area are between 600 and 900 pixels

<link href="small.css" rel="stylesheet"  media="screen and(min-width:600px) and(max-width:900px)"/>

@media screen and (min-width:600px) and (max-width:900px) {    .demo {        background-color: red;    }}

3. When the mobile screen is in portrait mode, apply Portrait style file, when the mobile device is in landscape mode, apply landscape style file

    <link href="protrait.css" rel="stylesheet"  media="all and(orientation:portrait)"/>    <link href="landscape.css" rel="stylesheet"  media="all and(orientation:landscape)"/>

Media Queries syntax summary

The syntax format is as shown in the figure below:

1. When using the Media Queries style module, it must start with "@media"

2. media_query represents the query key. For example, not only and, etc.

Not means performing an inversion operation on the following style expression

Only allows devices that do not support Media Queries but browsers that can read Media Type types to ignore them For this style, for mobile devices that support Media Queries, if the only keyword exists, the browser of the mobile device will ignore the only keyword and apply the style file directly according to the expression of the page

3. media_type specifies the device Type (also called media type)

4. media_feature defines device features in css

media_type device type list

media_feature device feature list

Most device features allow accepting min/max prefixes