移动端媒体查询的一些尺寸参考
/*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 属性相关为页面的可视区域的宽度
