zoukankan      html  css  js  c++  java
  • 移动WEB开发中媒体查询里的width, device-width, resolution


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

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

    /* iphone显示屏的设备像素是640*960,css像素320*480。
    媒体查询代码如下:
    -------------------------------------------------------*/
    @media screen and (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

  • 相关阅读:
    bzoj 1210 [HNOI2004] 邮递员 插头dp
    与非 乱搞233
    USACO JAN14 奶牛冰壶运动 凸包+判定
    bzoj 2829 计算几何
    R
    bzoj 1592 dp
    [Usaco2007 Open]Fliptile 翻格子游戏 状压dp
    拯救莫莉斯 状压dp
    大暑假集训 第一阶段总结 233
    hdu 1693 Eat the Trees 插头dp
  • 原文地址:https://www.cnblogs.com/rentj1/p/3553223.html
Copyright © 2011-2022 走看看