移动端媒体查询的一些尺寸参考

Posted ranyonsue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端媒体查询的一些尺寸参考相关的知识,希望对你有一定的参考价值。

移动端媒体查询的一些尺寸参考

/*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 属性相关,为页面的可视区域的宽度

 

以上是关于移动端媒体查询的一些尺寸参考的主要内容,如果未能解决你的问题,请参考以下文章

前端移动端适配 - 媒体查询适配方案

前端移动端适配 - 媒体查询适配方案

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

CSS3响应式布局(媒体查询@media)