移動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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM