CSS3 @media 查询，根据屏幕screen大小调节前端显示；媒体查询方法的使用

------------------- 1.媒体查询方法在 css 里面这样写 --------------------

@media screen and (min-width: 320px) and (max-width: 480px){
在这里写小屏幕设备的样式
}

 

@media only screen and (min-width: 321px) and (max-width: 1024px){
这里写宽度大于321px小于1024px的样式(一般是平板电脑)
}

 

@media only screen and (min-width: 1029px){
这里写pc客户端的样式
}

 

使用JS判断屏幕是横屏还是竖屏，然后使用媒体查询进行CSS设置：https://www.w3cways.com/1772.html

参考：

http://www.runoob.com/cssref/css3-pr-mediaquery.html

http://blog.51cto.com/ezbanana/1892526

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries