Responsive layout CSS3 Media query

Media query, which is an indispensable part of the responsive layout, is the medium.

Media query in CSS3 has added a lot of press queries so that in CSS3 we can adjust the page layout to accommodate different devices by adding various expressions to set different types of media conditions without changing the page expression content.

Media query is set up in two ways:

1. Directly in link to determine the device size, referencing different CSS to render the current page.

<rel = 'stylea.css '/>

Indicates that when the maximum screen width is less than or equal to 640px, STYLEA.CSS is called to render the page.

Media has 10 attribute values:

and is a keyword whose keywords also include not (excluding a device), only (qualifying a device)

max-width:640px is the media feature.

<rel= "stylesheet"  media= "screen and (min-width:320px) and ( max-width:640px) "  href=" styleb.css "/>

When the screen width is greater than 320px or less than 640px, Styleb.css is called to render the page.

2. Write in CSS style sheet.

{     . class{             background-color:#ff0000;    } }

and link in the same way, the first judgment device, referring to the corresponding style file overlay, render the page.

PS: Because the page adjusts the layout based on the width of the screen, the absolute width cannot be used for layout.

Media-device-width: The width of the entire device display area, that is, the actual device width.

Max-width: The width of the target display, which is the browser display width.

If you use Max-device-width to browse the Web on a PC-side browser, zooming in or out of the browser will not perform CSS because the width of the PC device has not changed.

If you use Max-width to zoom in or zoom out of the browser Web page, execute CSS, because the display area, browser size changes.

If you use Max-device-width, the CSS does not execute when the phone is vertical from the horizontal. Because the phone width has not changed.

Therefore, max-device-width is usually used when facing mobile devices. PC devices use Max-width.

Responsive layout CSS3 Media query