Multimedia query

min-device-width Follow min-width The difference between

@media  screen and (min-device-width:375px)  and (max-device-width:540px){
    
	#div0{
      
		background: red;
	}
}
@media  screen and (min-width:541px)  and (max-width:800px){
    
	#div0{
      
		background: blue;
	}
}

min-device-width Is the width of the entire display area of the device , for example , Real device screen width .

min-width Is the width of the target display area , for example , Browser width .

Example ：

If you use min-device-width, So in PC When browsing a web page on a browser , When the browser percentage is reduced or enlarged, it is not executed CSS Of ,PC The equipment will not change .

But if max-width, When zooming out or zooming in on the browser, you execute CSS Of , Because browsers （ Display area ） The size has changed .

If you use max-device-width, When the mobile phone changes from vertical to horizontal ,CSS It's not enforced , Because the width of the mobile phone has not changed .

If you use max-width, So when the mobile phone changes from vertical to horizontal ,CSS It's Executive , Because the display area has changed .

In actual development, we can flexibly use these two respective characteristics to achieve responsive development

Multimedia query is often introduced

1. Internal style

Inside the current component style Directly in the label @media Compiling

2. External style

Use in components link Introduce externally created css Style sheets

3. Inside style Label style

utilize style On the label media attribute , Create multiple... According to different sizes of equipment style label （link It's also on the label media attribute , therefore link You can also import more ）