移动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
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
