zoukankan      html  css  js  c++  java
  • max(min)-device-width和max(min)-width的区别

    max-device-width和max-width的区别表现在如下几个方面:

    1. max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。

    2. max-width是目标显示区域的宽度,例如,浏览器宽度。

    3. 如果使用max-device-width,那么在PC浏览器上浏览网页时,缩小或放大浏览器时是不执行CSS的,因为“PC设备”没有变化。但如果使用max-width,缩小或放大浏览器时是执行CSS的,因为“显示区域”即浏览器大小发生了变化。

    4. 如果使用max-device-width,那么当手机由竖变横时,CSS是不执行的,因为“手机宽度”并没有变化。如果使用max-width,那么当手机由竖变横时,CSS是执行的,因为“显示区域”发生了变化。

    5. 通常,面向“移动设备”用户使用max-device-width;面向“PC设备”用户使用max-width。

    例:

    /* #### 移动设备 #### */
    @media screen and (max-device- 480px){
    /* CSS 代码 */
    }
    /* #### PC #### */
    @media screen and (max- 1024px){
    /* CSS 代码 */
    }

    实例分析

    下面是两段css代码

    代码1:

    @media(max-device-960px)
    {
        /* CSS 代码 */

    代码2:

    @media(max-960px)
    {
        /* CSS 代码 */

    现在在PC机上打开网页,用Firefox浏览器,把浏览器缩小到宽度为385px。

    使用max-device-width的结果

    使用max-device-width时,网页不会随浏览器缩小而自适应变化。

    使用max-width的结果

    使用max-width的结果

    使用max-width后,网页随浏览器缩小而发生自适应变化

  • 相关阅读:
    蓝桥杯 算法训练 ALGO-118 连续正整数的和
    迭代器和生成器
    字符串格式化
    python 赋值 深浅拷贝
    web.py
    urlib2 标准代码
    left menu
    tab menu
    modal html
    emmet使用
  • 原文地址:https://www.cnblogs.com/baoshuyan66/p/4867964.html
Copyright © 2011-2022 走看看