媒体查询

为什么要有媒体查询

因为web的话一个页面可能要去兼容pc端以及移动端，这就涉及到很多不一样的设备，对于页面起最主要影响的就是屏幕的显示分辨率，所以需要知道页面究竟是在怎么样的一个页面上显示。

媒体查询代码

@media all and(max-width:640px){
	body{background:orange;}
}
@media all and(min-width:641px) and (max-width：750px){
	body{background:red}
}

通过这段代码我们就可以看出，
当屏幕的分辨率小于640px的时候，屏幕上显示的就是橙色；
当屏幕的分辨率大于641px小于750px的时候，屏幕就会显示红色。

需要注意的问题

范围的规定不可以随便写，要根据这些来写
1.手机等小屏幕手持设备
@media screen and (min-width:320px) and (max-width:480px){}
2.平板之类的宽度：
@media screen and (min-width:321px) and (max-width:1024px){}
3.pc端或者大屏幕设备：1028px甚至更大
@media only screen and (min-width:1029px){}
4.竖屏
@media screen and (orientation:portrait){对应样式}
5.横屏
@media screen and (orientation:landscape){对应样式}
写竖屏和横屏的时候不要在最后加上宽度
还有一个最主要的就是在写min-width和max-width的时候不可以加分号，加了分号就会导致样式显示不出来，vscode
是有这个坑的。

总的来说媒体查询相对还是比较简单的，就是and的使用语法要保证正确。