Media Query of CSS3 Media Query_html/css_WEB-ITnose

Media Queries is a property of CSS3 related to media queries. With CSS3 media queries, Media Queries can perform media queries and write different styles for each different media. The legendary web responsive layout can be made without any pressure. Let's take a look at the relevant knowledge of CSS3 media queries.

1. Introduction method of Media Query

1. External reference

2. Introduction of @media >

4. Introduction via @import

@import url("css/reset.css") screen; @import url("css/print.css") print;

2. The value in Media of Media Query

3. Media Query compatibility

4. Media Query examples

　1. Max Width?? When the screen is less than or equal to 600px, the small.css style will be used to render the Web page

2. Minimum width Min Width?? When the screen is greater than or equal to 900px, the big.css style will be used to render the Web page

3. Multiple Media Queries?? When the screen is between 600px-900px, use the style.css style to render the web page

4. Output of device screen Width Device Width??iphone.css style is suitable for the maximum device width of 480px, such as the display on the iPhone. The max-device-width here refers to the actual resolution of the device, which means the visible area resolution

5. iPhone4

　6. iPad?? uses portrait.css to render the page in portrait orientation; landscape.css is used to render the page in landscape orientation

7. Android

8. Not keyword?? Exclude certain specified media types

9. only keyword

only is used to specify a certain Specific media types can be used to exclude browsers that do not support media queries. In fact, only is often used to hide style sheets for devices that do not support Media Query but support Media Type. The main ones are: for devices that support Media Queries, if the style is called normally, it will be treated as if only does not exist; for devices that do not support Media Queries but support Media Type, this will The style is not read because it reads only instead of screen; in addition, browsers that do not support Media Qqueries will not use the style regardless of whether they support only.

 

10. The comma??style.css style is used on handheld devices with a width less than or equal to 480px, or is used for screen widths greater than or equal to 960px on devices

11. Disable screen scaling

On mobile browsers, the zooming function can be disabled by adding user-scalable=no to the viewport meta tag. By disabling the zoom function, users can only scroll the screen, making your website look more like a native application. Note that we do not recommend this method for all websites, it still depends on your own situation!

The introduction to CSS3 Media Query is here Above, I hope that after reading it, you will be able to master this small CSS3 property of media query very easily.