@media screen解决移动web开发的多分辨率问题

在css2中就有media type属性，用于判断媒体类型。而在css3中新增了 media query属性用于增强media type属性。media query属性可以看做是是media type属性的增强版，使media type可以进行条件判断输出对应的css。screen仅是media中的一种

常用设备的尺寸：

显示器1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

当只使用min_width或则max_width时；我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面，顺序不能混淆。例如

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

当然在很多情况下都是混合使用；例如

@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px} }

还有一种方法是我不常使用的：

意思是当屏幕的宽度大于600小于800时，应用style.css文件设置样式

注意其与device-aspect-ratio的区别

写了一段代码，可能有不合理之处，但是效果还是有的：

这里是头部

百度一下