爱程序网

移动WEB开发中媒体查询里的width, device-width, resolution

来源: 阅读:


/*1、width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px。
当设置viewport width=device-width时,对应的媒体查询中width的值为:设备物理像素 / window.devicePixelRatio。
----------------------------------------------------------*/
@media screen and (width:360px){
body{ background-color:#0f0; }
}

/*2、device-with: 屏幕宽度,android上是设备像素,ios上是css像素。
三星S3的屏幕是720*1280媒体查询代码如下:
----------------------------------------------------------*/
@media screen and (device-width:720px){
body{ background-color:#ff0; }
}

/* iphone显示屏的设备像素是640*960,css像素320*480。
媒体查询代码如下:
-------------------------------------------------------*/
@media screen and (width:320px){
body{ background-color:#ff0; }
}


/*3、resolution: 设备分辨率,每英寸所拥有的像素数。如:
----------------------------------------------------------*/
@media screen and (resolution:306dpi){
body{ background-color:#000; }

}

媒体查询的device-width特性在ios和android上不一致,android是应用设备像素,ios是应用css像素。
另外resolution浏览器支持不够好,可以使用device-pixel-ratio代替,device-pixel-ratio的值为 window.devicePixelRatio

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助