码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-08-15 17:12:13      阅读:3910      评论:0      收藏:0      [点我收藏+]

标签:port   screen   height   尺寸   屏幕   平板   设备   宽度   适合   

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

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

 

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

标签:port   screen   height   尺寸   屏幕   平板   设备   宽度   适合   

原文地址:http://www.cnblogs.com/ranyonsue/p/7365953.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!