With the rapid popularity of mobile devices, users no longer just use traditional computers to browse Web content. More and more users are beginning to use smartphones, tablets or other devices of various sizes to browse Web content. In order to ensure the use of If users of different devices can have a good experience, they need to use media queries.
Media query is one of the most important functions of CSS style sheets. The so-called media query refers to distinguishing various devices (such as computers, mobile phones, tablets, Braille devices, etc.) based on different media types (device types) and conditions. And define different CSS styles for them respectively. Media queries allow CSS to more accurately act on different devices or different conditions on the same device, so that all users can get a good user experience.
1. Media type
Media types are used to represent device categories. CSS provides some keywords to represent different media types, as shown in the following table:
2. Media characteristics
In addition to specific types, specific characteristics of the device can also be described through some attributes, such as width, height, resolution, etc., as shown in the following table:
3. Logical operators
Logical operators include not, and, and only. Complex media queries can be constructed through logical operators. You can also separate multiple media queries by commas and combine them into one rule.
and: Used to combine multiple media queries into one media query. When each query rule is true, the media query is true. In addition, the and operator can also combine media characteristics and media types;
not: used to negate media queries. When the query rule is not true, it returns true, otherwise it returns false. If the not operator is used, the media type must also be specified;
only: will only take effect if the entire query matches. When only is not used, older browsers will simply interpret screen and (max-width: 500px) as screen, ignore the rest of the query, and apply the style to All screens. If you use the only operator, you must also specify the media type.
4. Define media queries
Currently you can define media queries in two ways:
Use @media or @import rules to specify the corresponding device type in the style sheet;
Use the media attribute to specify a specific device type in a <style>, <link>, <source>, or other HTML element.
(1)@media
We have briefly looked at @media in the "CSS @Rules" section. Using @media you can specify a set of media queries and a CSS style block. If and only if the media query matches the device being used, the specified CSS style will be applied to the document. The sample code is as follows:
/*On screens less than or equal to 992 pixels, set the background color to blue*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*On screens 600 pixels or less On the screen, set the background color to olive */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @import
@import is used to import a specified external style file and specify the target media type. The sample code is as follows:
@importurl(css/screen.css)screen;/*Introducing external styles, this style will only be applied to computer monitors*/@importurl(css/print.css)print;/*Introducing external styles, this style will only be applied to Printing device*/body{background:#f5f5f5;line-height:1.2;}Note: All @import statements must appear at the beginning of the style sheet, and styles defined in the style sheet override conflicting styles in imported external style sheets.
(3) media attribute
You can also define media queries in the media attributes of <style>, <link>, <source> and other tags. The sample code is as follows:
/*Apply this style when the page width is greater than or equal to 900 pixels*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*Apply this style when the page width is less than or equal to 600 pixels*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
Tip: You can also specify multiple media types in the media attribute, using commas to separate each media type, for example, media=screen, print.