Detailed usage of media queries in CSS3

Media queries can use different styles under different conditions to make the page different from the device to achieve different rendering effects

@media Media type and (media attributes) {your style}

Max width max-width

"Max-width" is one of the most commonly used features in media attributes, meaning that the style takes effect when the media type is less than or equal to the specified width. Such as:

CSS code copy content to clipboard

@media screen and (max-width:480px) {

. ads {

Display:none;

}

}

The above indicates that when the screen is less than or equal to 480px, the ad block (. ads) on the page is hidden.

Min width min-width

"Min-width", in contrast to "max-width", refers to a style that takes effect when the media type is greater than or equal to the specified width.

CSS code copy content to clipboard

@media screen and (min-width:900px) {

. wrapper{width:980px;}

}

The above indicates that the width of the container ". Wrapper" is 980px when the screen is greater than or equal to 900px.

Multiple media features use

When the screen is between 600px~900px, the body's background color is rendered as "#f5f5f5," as shown below.

CSS code copy content to clipboard

@media screen and (min-width:600px) and (max-width:900px) {

Body {background-color: #f5f5f5;}

}

Output width of device screen device

On smart devices such as the iphone, ipad, and so on, you can also set the appropriate style depending on the size of the screen device (or call the appropriate style file). Similarly, the "Min/max" corresponding parameters, such as "Min-device-width" or "max-device-width", can also be used for screen devices.

CSS code copy content to clipboard

　　

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

Not keyword

CSS code copy content to clipboard

@media not print and (max-width:1200px) {style code}

The code above indicates that the style code will be used in all devices except the print device and device width of less than 1200px.

only keyword

CSS code copy content to clipboard