Media Queries Press query using

Media queries translation comes to the press query, media refers to the type of medium, then what kind of, often have screen (screens), printing (print), personal understanding is its different terminal.

Common usage:
1,<link rel= "stylesheet" media= "screen and (max-width:600px)" href= "Small.css"/>
Invokes the appropriate style, depending on the criteria that are met

2. Use media features directly in CSS (judging conditions)
Media query accepts only a single logical expression as its value, or no value;
Let's change the outer style of the above call to the CSS notation:
@media screen and (max-width:600px) {
HTML {font-size:30px;}
}
Max-width represents a time less than or equal to a certain width
Min-width represents a time greater than or equal to a certain width

More Property Values reference:

3, multiple media queries using
<link rel= "stylesheet" media= "screen and ( min-width:600px) and (max-width:900px) "href=" B.css "type=" Text/css "/>
above means when the screen width is greater than or equal to 600px, less than or equal to 900px, Displays the styles in B.css


4, the output width of the device screen, devices width
<link rel= "stylesheet" media= "screens 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
Personal understanding: According to the screen size of your terminal device, to invoke the style, not suitable for PC-side
5, set the style for iphone4 

   <rel=media=type=href="iphone4.css"/>    

The above style is written specifically for IPhone4 mobile devices.

6,ipad

  <rel=media=href=type=<rel=media=href=type="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

/*240px width *  /<link rel= "stylesheet" media= "only screens and (max-device-width:240px)" href= "Android240.css" Type= "Text/css"/>  /*360px Width *  /<link rel= "stylesheet" media= "only screen 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 keywords

<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 keywords

<link rel= "stylesheet" media= "only screens 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, if media Type is not explicitly specified in media query, it defaults to all, such as:

  <rel=media=href=type="text/css"/>    

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

  <rel=type=href=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.

Solve the problem:

All of the knowledge is to solve the problems encountered in the work, then media queries solve our problems? What is the situation to use? I am making a phone page based on the size of the screen to make different spacing, font size, the use of the same, it can also specify a responsive page. So how does he set the font? For example, in 640px, the font size is 38px, then 480px terminal, the font size is 480/640*38 finally equal to 28.5px. If we want to get the exact font, we need to calculate at any time, with the method of JS I have not done, there is free to try, but through the CSS3 media Queris can solve the problems I encountered.

But what if the fonts appear small in the iphone? adjourned

Reference URL:

CSS3 Media QueriesCSS Media queries templatesResponsive layout-device pixel density test (-webkit-min-device-pixel-ratio) responsive design combined with CSS3 Media queries

Media Queries Press query using