• 在网页自适应设计中,max-device-width和max-width是不可缺少的两大CSS属性,但是可能大家在使用的选择上没有太多讲究,认为用其中一个即可。确实,如果没有特定要求,用任何一个都没有什么问题,不过如果你对此两个属性有了充分的认识之后,你或许把网页的自适应设计得更为极致一些。

      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的区别和使用有所了解了吧。

      看看下面的写法

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

      min-device-width和min-width的区别,跟max-device-width和max-width的区别是一样的。

      实例分析

      下面是两段css代码

      代码1:

      @media(max-device-width:960px)
      {
      /* CSS 代码 */
      } 代码2: @media(max-width:960px)
      {
      /* CSS 代码 */

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

      使用max-device-width的结果

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

      使用max-width的结果

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

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

  1. linux内核中的min(x, y)和max(x, y)宏定义

    /linux/include/linux/kernel.h中有min(x, y)和max(x, y)的定义如下: #define min(x, y) ({ \ typeof(x) _min1 = x; ...

  2. 716. Max Stack (follow up questions for min stack)

    Design a max stack that supports push, pop, top, peekMax and popMax. push(x) -- Push element x onto ...

  3. MAX II Device Compatibility with 5.0-V CMOS Devices

    http://www.altera.com/literature/hb/max2/max2_mii51009.pdf The open-drain pin never drives high, onl ...

  4. 点击按钮,缩放图片(img.width、img.style.width、img.offsetWidth)

    前几天在慕课网上看到一个关于图片缩放的教学视频,因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪,所以周末得空了,想来自己试着写出来,相关视频网址如下:http ...

  5. jQuery.width()和jQuery.css('width')的区别

    [TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...

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

    width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...

  7. width() innerwidth() outerwidth() css('width')

    不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...

  8. 深入子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  9. 微软BI 之SSIS 系列 - 平面文件格式的区别(Delimited,Fixed width,Ragged Right, Fixed width ...)

    开篇介绍 SSIS 中处理文件,一般在描述输出平面文件格式的时候通常会出现以下几种选项: Delimited - 默认输出列使用逗号分隔,也可以选择其它的诸如 | ,或者 Tab 等. Fixed W ...

  10. 深入理解子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

随机推荐

  1. 颜色表及html代码

    颜色名称及色样表(HTML版)   颜色名 中文名称 Hex RGB 十进制 Decimal     LightPink 浅粉红 #FFB6C1 255,182,193     Pink 粉红 #FF ...

  2. Java String类中的intern()方法

    今天在看一本书的时候注意到一个String的intern()方法,平常没用过,只是见过这个方法,也没去仔细看过这个方法.所以今天看了一下.个人觉得给String类中加入这个方法可能是为了提升一点点性能 ...

  3. paste DEMO合并文件

    测试数据: [xiluhua@vm-xiluhua][~]$ cat msn.txt aaa bbb bbb ccc ccc ddd bbb eee aaa ccc bbb sss [xiluhua@ ...

  4. Oracle游标练手实例

    --声明游标:CURSOR cursor_name IS select_statement --For循环游标 --(1)定义游标 --(2)定义游标变量 --(3)使用for循环来使用这个游标 de ...

  5. 系统图片uri的问题

    调用系统图库会出现两种uri的问题,一个是在文件管理器中的图库中,获取到的地址为:content://media/external/images/media/972  这种格式 另外一种的是系统文件管 ...

  6. ACM题目————图的广度优先搜索

    题目描述 图的广度优先搜索类似于树的按层次遍历,即从某个结点开始,先访问该结点,然后访问该结点的所有邻接点,再依次访问各邻接 点的邻接点.如此进行下去,直到所有的结点都访问为止.在该题中,假定所有的结 ...

  7. android技术总结

    1.要做一个尽可能流畅的ListView,你平时在工作中如何进行优化的? ①Item布局,层级越少越好,使用hierarchyview工具查看优化. ②复用convertView ③使用ViewHol ...

  8. css3 动画 执行一次

    function testAnim(x) {   $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitA ...

  9. YTU 2924: 文件操作--二进制文件读入

    2924: 文件操作--二进制文件读入 时间限制: 1 Sec  内存限制: 128 MB 提交: 58  解决: 20 题目描述 现有100名学生的姓名(name).学号(num).英语(Engli ...

  10. 华东交通大学2016年ACM“双基”程序设计竞赛 1004

    Problem Description LB是个十分喜欢钻研的人,对什么事都要搞明白.有一天他看到一个公式,((a-b)*c+d*e)/f=k.他想如果给定K的值,一共有多少种不同整数的组合(a,b, ...