CSS3 Media Query Method summary-make your website compatible with your phone

First, CSS3 media Queries translated into Chinese is a "medium query", there are several ways to introduce: 1, the direct head of the reference, in fact, media in the CSS2 already exist, however, his main role you do not pay attention to, compatible with all media and so on. You must have seen the following wording:

 <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

Now, in order to be compatible with the size of the screen, we can write:

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

Load "smallscreen.css" when screen Max is 600px

2, @import way reference, this way of reference, to be in style, the following wording:

<style type="text/css" media="screen"> 或者写成<style type="text/css" media="screen and (max-width: 600px)"> @import url("css/style.css"); </style>

That is, loading style.css on a specific screen.

3, I most commonly used is the third method, that is, the following method:

  @media screen and (max-width: 600px) { 选择器 { 属性：属性值； } }

Write the @media screen control directly in the style.

Second, the specific use of Media queries 1, max width max

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

The above indicates that when the screen is less than or equal to 600px, the Web page is rendered in the Small.css style.

2. Min width

   <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

The above indicates that when the screen is greater than or equal to 900px, the Web page is rendered in the Big.css style.

3, multiple media queries use

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

Media query can combine multiple media queries, in other words, a media query can contain between 0 and more expressions, and the expression can contain between 0 and more keywords, as well as a media Type. As it says above, when the screen is between 600px-900px, the STYLE.CSS style is used to render the Web page.

4. Output width of device screen

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

The above code refers to the IPHONE.CSS style for the maximum device width of 480px, such as the display on the iphone, where Max-device-width refers to the actual resolution of the device, that is, the visual area resolution

5, IPhone4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

The above style is written specifically for IPhone4 mobile devices.

6. IPad

  <link Rel="Stylesheet" Media= "All and (orientation:portrait)"  href< Span class= "pun" >= "portrait.css"  type=< Span class= "ATV" > "text/css"  /> < Link rel= "stylesheet" media= "All and (Orientation:landscape)"  Span class= "ATN" >href= "landscape.css"  = "text/css"  />    

In the case of large numbers, the mobile device on the ipad is the same as on the iphone, but the difference is that the ipad declares a different direction, such as the above example, in Portrait (portrait) Use PORTRAIT.CSS to render the page, and use LANDSCAPE.CSS to render the page in landscape (landscape).

7. Android

 Width of/*240px */  <Link rel="Stylesheet"Media="Only screen and (max-device-width:240px)"Href="Android240.css"Type="Text/css" /> Width of/*360px */ <Link rel="Stylesheet"Media= "only screens and (min-device-width:241px) and (max-device-width:360px)"  Href= "android360.css"  Type=  "text/css"  /> /* 480px width */ <link rel=  "stylesheet"  Media= "only screen and ( min-device-width:361px) and (max-device-width:480px) " Href= "Android480.css"  Type= "text/css"  />              

We can use media query to provide specific styles for Android phones at different resolutions, so that the screen resolution can be resolved differently for Android phone page refactoring issues.

8. Not keyword

 <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

The NOT keyword is used to exclude a certain type of media, in other words, to exclude devices that match an expression.

9. Only keyword

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

Only used to set a specific media type that can be used to exclude browsers that do not support media queries. In fact, only many times it is used to hide style sheets for devices that do not support media query but support media type. The main features are: devices that support media Queries, the normal invocation style, when only does not exist, and for devices that do not support media features (media Queries) but that support the medium type, which will not read the style, Because its first reads only instead of screen, and the browser does not support media qqueries, the style will not be adopted, whether or not it supports only.

10. Other

If media Type is not explicitly specified in media query, it defaults to all, such as:

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

There is also a comma (,) that is used to denote a juxtaposition or representation or, as follows

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

The style.css style in the code above is used on a handheld device with a width less than or equal to 480px, or on a device with a screen width greater than or equal to 960px.

CSS3 Media Query Method summary-make your website compatible with your phone