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.

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