Sorting of media query knowledge points

1. What is media query?

Media query is the if statement of the style sheet, which determines which CSS to execute through various conditions.

@media only screen and max-width:600px{
	.aside{
		width:500px;
	}
}

compatibility:

<!–[if lt IE 9]>
<script src="http://cdn.staticfile.org/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>
<![endif]–>

The HTML5 tag, IE9, was not supported before

<!–[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]–>

1) Media type

All: all media types, which is also the default value for all devices*

@media all max-width:600px{
	...
}

• screen: usually refers to PC, mobile phone and pad
• tv: tv
• print: printer (usually black and white)
• projection: projector
• Handheld: handheld device
• speech: voice device
• barille: touch device

In the latest version of media query4, only four types are reserved: all print speech screen. Other devices will no longer respond.

2) Media feature expression: at present, the feature conditions available for verification are

• width
• max-width
• min-width
• Color: judge whether it is a color device
• device-width
• orientation: landscape and portrait
• Aspect ratio: display width and height
• Resolution: resolution
• Min device pixel ratio: physical pixel ratio

@media only screen and (-webkit-min-device-pixel-ratio: 2){
.....
}

2. Media query format

@media Condition 1  [Logical symbol] Condition 2 ....{
	...
} 

💡Notice:

1. Media characteristics (conditions) are declared in parentheses - (min width: 500px)
2. Characteristic attribute and characteristic value, separated by:
3. Do not use after the attribute declaration is completed; end

@meida screen and (max-width:1000px) and (min-width:800px){

}

3. Media query logic

(1) Relationship with (and)

When multiple media types and features are linked, the query is valid only if all the conditions are true

@media (min-width:320px) and (orientation:landspace){
	.aside{
		display:none;
	}
}

💡Notice:

min is greater than or equal to

max less than or equal to

(2) Or relationship (,)

If one condition is met, the style will take effect

@media (min-width:320px) , (orientation:landspace){
	.aside{
		display:none;
	}
}

(3) not

Reverse operation (meaning 'except')

not (max-width:600px)

not (all and (max-width:600px))
not (screen and (max-width:600px))

💡Notice:

• When not is used with and, it reverses the entire query statement, not the nearest query
• all cannot be reversed

@media not (all and (min-width:320px) ), (orientation:landspace){
  ...
}

💡Notice:

• At this point, not only takes effect in the query where it is located

Example:

8bit

32bit

@media  (max-width:960px)

@media not handheld and (min-width:360px),screen and (min-width:480px)

@media color {...}

@media all and (min-width: 700px) and (orientation: landscape) { ... }

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

@media not(all and (max-width:480px)) 

4. Media query strategy******

1) Sequential strategy

For the same code segment, if the writing order is different, the execution result is also different

2) Min width and max width

Mobile first features:

1. First develop the mobile terminal

2. Min width is used for all conditions

3. All breakpoints are from small to large

4. Consider style append (+)

5. Applicable to projects made from 0

   Because it conforms to the characteristics from easy to difficult, it is the best way to play the default characteristics of HTML elements, and it is the CSS superposition phenomenon

Desktop first features:

1. Develop the PC page first

2. For all conditions, use max width

3. All breakpoints appear from large to small

4. Consider the coverage of styles (-) and the priority of new style codes

5. When adapting the original PC project to the mobile terminal

   This method will cause a lot of CSS style coverage

3) Breakpoint selection timing

• BOOTSTRAP framework has default breakpoints
• Manual setting: in the process of changing the viewport from small to large, when the page becomes worse, this is the breakpoint setting point

6. Use of media query

1) Link media query

Device based

<link rel="stylesheet" href="one.css" media="srceen">
<link rel="stylesheet" href="two.css" media="print">

Based on condition

<link rel="stylesheet" href="one.css" media="screen and (min-width:414px)">

💡Notice:

• Do not include query criteria in the corresponding style sheet file

Not recommended. Increase the number of redundant requests and reduce the execution efficiency

2) Embedded media query (recommended)

Write the media query code to the original CSS file