比如用媒体查询响应输出@media (max-width: 767px),用谷歌浏览器手机测试插件显示并无变化,其实关键在于max-device-width和max-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。

通过这样解释,你应该对max-device-width和max-width的区别和使用有所了解了吧。

max-device-width和max-width的区别的更多相关文章

  1. flex stage.width 与stage.stageWidth的区别

    flex stage.width 与stage.stageWidth的区别: stage.width 是指舞台上的可视对象占据的尺寸 stage.stageWidth是指舞台设置的尺寸,与舞台上的元件 ...

  2. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  3. width:auto 和 width:100%有什么区别

    width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...

  4. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  5. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  6. 区分width()、css('width')、innerWidth()

    #widthTest1 { width: 200px; height: 200px; background-color: #00CCFF; -webkit-box-sizing: border-box ...

  7. Linux - 修改系统的max open files、max user processes (附ulimit的使用方法)

    目录 1 问题说明 2 修改max open files 3 修改max user processes 4 附录: ulimit命令说明 1 问题说明 Linux 系统默认的max open file ...

  8. table width 决定 td width

    w td width 有无在chrome edge ff 均未影响td实际宽度,td接近等比分配table width. <!doctype html> <html lang=&qu ...

  9. Pairs Forming LCM 在a,b中(a,b<=n)(1 ≤ n ≤ 10^14),有多少组(a,b) (a<b)满足lcm(a,b)==n; lcm(a,b)=p1 ^ max(a1,b1) * p2 ^ max(a2,b2) *..........*pn ^ max(an,bn)

    转自:http://www.cnblogs.com/shentr/p/5285407.html http://acm.hust.edu.cn/vjudge/contest/view.action?ci ...

  10. Linux - 修改系统的max open files、max user processes(附ulimit的使用方法)【转载】

    Linux - 修改系统的max open files.max user processes(附ulimit的使用方法)目录 1 问题说明2 修改max open files3 修改max user ...

随机推荐

  1. 软工实践 - 第三十次作业 Beta答辩总结

    福大软工 · 第十二次作业 - Beta答辩总结 组长本次博客作业链接 项目宣传视频链接 本组成员 1 . 队长:白晨曦 031602101 2 . 队员:蔡子阳 031602102 3 . 队员:陈 ...

  2. Ubuntu命令行安装显卡驱动

    1. sudo apt-et purge nvidia* 卸载原有驱动 2. sudo add-apt-repository ppa:graphics-drivers sudo apt-get upd ...

  3. lintcode-413-反转整数

    413-反转整数 将一个整数中的数字进行颠倒,当颠倒后的整数溢出时,返回 0 (标记为 32 位整数). 样例 给定 x = 123,返回 321 给定 x = -123,返回 -321 标签 整数 ...

  4. Strust2: 工作流程

    以下为Struts2的体系结构图: Struts2框架处理用户请求,大体分为以下几个过程: (1)用户发出一个HttpServletRequest请求 (2)请求经过一系列过滤器,最后达到Filter ...

  5. Hash(散列函数)简单应用引出解决散列冲突的四种方法

    商店允许顾客通过电话订购商品,并在几天后上门自取.商店的数据库使用客户的电话号码作为其检索的关键字(客户知道自己的电话号码,而且这些电话关键字几乎是唯一的).如何组织商店的数据库,以允许更加高效的进行 ...

  6. 【第九周】psp

        代码累计 300+575+475+353+620=2223 随笔字数 1700+3000+3785+4210+4333=17695 知识点 java反射机制 数据库技术 动态规划算法 pyth ...

  7. Fetch POST All in One

    Fetch POST All in One FPAIO "use strict"; /** * * @author xgqfrms * @license MIT * @copyri ...

  8. .net MVC中使用angularJs刷新页面数据列表

    使用angularjs的双向绑定功能,定时刷新页面上数据列表(不是刷新网页,通过ajax请求只刷新数据列表部分页面),实例如下: @{ Layout = null; } <!DOCTYPE ht ...

  9. SpingCloud之feign框架调用

    1.生产者(没有什么特殊性) pom.xml <?xml version="1.0" encoding="UTF-8"?> <project ...

  10. InnoDB 5.6 新特性之一:FullTEXT Indexes[1.简单介绍]

    先来看一条SQL语句: SELECT * FROM aa where acol like '%like_normal%'; 当我们使用Innodb时,无论如何对这条语句进行优化,都是无意义的:有的人会 ...