移动端媒体查询的一些尺寸参考
/*iphone4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){
/* Styles */
}
@media screen and (min-width: 320px) and (max-width: 480px) {
/* Styles */
}
/*iphone5*/
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
/* Styles */
}
/*iphone6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
/* Styles */
}
/*iphone6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
/* Styles */
}
/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){
/* Styles */
}
/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){
/* Styles */
}
/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
/* Styles */
}
/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
/* Styles */
}
/* 竖屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {
/* Styles */
}
/* 横屏 */
@media screen and (orientation:landscape) and (min-width : 480px){
/* Styles */
}
常规尺寸详细适配
@media screen and (min-width: 320px) { }
@media screen and (min-width: 360px) { }
@media screen and (min-width: 375px) { }
@media screen and (min-width: 400px) { }
@media screen and (min-width: 414px) { }
@media screen and (min-width: 440px) { }
@media screen and (min-width: 480px) { }
@media screen and (min-width: 520px) { }
@media screen and (min-width: 560px) { }
@media screen and (min-width: 600px) { }
@media screen and (min-width: 640px) { }
@media screen and (min-width: 680px) { }
@media screen and (min-width: 720px) { }
@media screen and (min-width: 760px) { }
@media screen and (min-width: 800px) { }
@media screen and (min-width: 960px) { }
注意事项：
width 指的是可视区域的宽度，当页面 scale 被设置成 0.5 时，其值会放大一倍。
device-width 是设备实际的宽度，不会随着屏幕的旋转而改变，因此并不适合开发响应式网站。
比如 iphone5s 的屏幕分辨率宽为 640，由于 retina 显示策略，当 scale 设置为1的时候，对应的media 中取到的 width 为320，当 scale 设置为0.5的时候，width为640，而 device-width 始终是320。
总结
1.device-width 只和设备的分辨率有关，一般是分辨率/设备像素比，且不会随着手机旋转而改变其值
2.width 会和 viewport 的 scale 属性相关，为页面的可视区域的宽度