Detailed explanation of the usage of Media Queries in css3:
At present, fixed-width websites have gradually been replaced by responsive designs, which is an inevitable trend.
The so-called responsive design means that the page can be displayed well regardless of the screen or device used (the page display style may be different on different devices).
Responsive design solves the challenges posed to programmers by devices of various specifications and shapes, allowing web pages to be displayed normally whether on traditional computers, mobile phones or tablets.
Through media query technology, responsive design can be well realized. Let’s introduce media query below.
1. Media queries in CSS2:
In fact, there are also applications of media queries in css2, but they are relatively simple. See the following code:
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
The above code stipulates three css files respectively. For monitors, all types of devices and printers respectively.
2. How to use media queries:
There are many ways to use media queries, which are basically suitable for one-to-one correspondence with css usage. They are listed as follows:
Introduced by link method:
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
xml Import method:
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
@import method introduction:
@import url("css/reset.css") screen;Used in css code:
@media screen{
选择器{
属性：属性值；
}
}Used on style tag:
<style type="text/css" media="screen">
/*code*/
</style>
3. Media query Rules:
Media queries in css2 are very simple and can only distinguish media types.
css3 has expanded the media query, not only based on the type of media, but also based on the related attributes of the media.
Look at the following code example:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="softwhy.css" />
When the page width is less than or equal to 600px and applied to the screen, softwhy.,css will be called. Query rules:
Contains a media type, followed by one or more expressions that check for specific conditions (such as minimum screen width).
Although the usage methods are different and the methods of defining media queries are also different, such as the media attribute method and the @media method, the rules are the same.
(1). Simple code:
@media all and (min-width:800px) {
/*code*/
} All screens with a minimum horizontal screen width of 800 pixels use the corresponding css code.
Special note: If the media type is all, all can be omitted, and the and after all can also be omitted. The abbreviated code is as follows:
@media (min-width:800px) {
/*code*/
} (2). Complex query code:
@media (min-width:800px) and (max-width:1200px) {
/*code*/
}(3).and Keyword:
and is used to specify that the conditions must be met at the same time. The code is as follows:
@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
}When the screen meets the requirements of greater than or equal to 800px and less than or equal to 1200px, the corresponding will be used css code.
(4).or keyword:
or is used to stipulate that as long as one condition is met, the code is as follows:
@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
}When the screen size is approximately equal to 800px, or the direction is portrait, it will Use the corresponding css code.
(5).not keyword:
not is used to specify that it can be established when the specified conditions are not met.
@media not print{
/*code*/
}When it is not a printer device, use the corresponding css code.
Next Section