作者:mobiledu2502930075 | 来源:互联网 | 2023-10-09 19:05
*1、width:viewport的宽度,css像素,三星S3的viewort默认宽度是980px。当设置viewportwidthdevice-width时,对应的媒体查
/*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