CSS3 series four (Media queries mobile device style)

Viewport setting adapts to mobile device screen size

Viewport: Allows developers to create a virtual window and customize its window size or zoom function

<name= "Viewport"  content= "width=device-width,initial-scale=1, User-scalable=0 "/>

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

How Media queries Works

1, define the current screen viewable area of the maximum width is 600 pixels

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

So, how did small.css write it?

{    . demo {        background-color:red;    } }

2. Define the width of the current screen viewable area between 600 and 900 pixels

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

{    . demo {        background-color: red;    } }

3. When the mobile screen is in Portrait (portrait) mode, the portrait style file is applied, and when the mobile device is in landscape (landscape) mode, the landscape style file is applied

    <href= "Protrait.css"  rel= "stylesheet"  Media = "All and (orientation:portrait)" />    <  href= "Landscape.css"  rel= "stylesheet"  Media  = "All and (Orientation:landscape)"/>

Media Queries Syntax Summary

The syntax format is as follows:

1. You must start with a "@media" mode when using media queries style modules

2, Media_query said query key, such as not only and so on

• Not represents a reverse action on a later style expression
• Only browsers that do not support media queries but can read media type types ignore this style and, for mobile devices that support media queries, if the only keyword exists, The browser of the mobile device ignores the only keyword and applies the style file directly to the page's expression

3. Media_type specified device type (also known as media type)

4. Media_feature defining device features in CSS

Media_type Device Type list

Media_feature Equipment Features List

Most device features allow the Min/max prefix to be accepted

CSS3 series four (Media queries mobile device style)