max(min)-device-width和max(min)-width的区别
在网页自适应设计中,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的区别的更多相关文章
- 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; ...
- 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 ...
- 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 ...
- 点击按钮,缩放图片(img.width、img.style.width、img.offsetWidth)
前几天在慕课网上看到一个关于图片缩放的教学视频,因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪,所以周末得空了,想来自己试着写出来,相关视频网址如下:http ...
- jQuery.width()和jQuery.css('width')的区别
[TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...
- CSS width:100%和width:auto的区别
width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...
- width() innerwidth() outerwidth() css('width')
不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...
- 深入子元素的width与父元素的width关系
深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...
- 微软BI 之SSIS 系列 - 平面文件格式的区别(Delimited,Fixed width,Ragged Right, Fixed width ...)
开篇介绍 SSIS 中处理文件,一般在描述输出平面文件格式的时候通常会出现以下几种选项: Delimited - 默认输出列使用逗号分隔,也可以选择其它的诸如 | ,或者 Tab 等. Fixed W ...
- 深入理解子元素的width与父元素的width关系
深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...
随机推荐
- LUA笔记之表
表据说是LUA的核, 呵呵, 看例子吧, 看上去, 跟java的list很像, 又有点像json: a = {} -- create a table and store its reference i ...
- WINCE 隐藏标题栏
转自:https://social.msdn.microsoft.com/Forums/en-US/cef1c20a-25cf-49b6-a56e-6bc733be88f8/removing-the- ...
- PL/SQL显示行号和高亮当前行
PL/SQL Developer 如何显示行号: PL/SQL Developer 高亮当前行: OK!
- maven:log4j:WARN No appenders could be found for logger (loggerInfo).或者maven build error:org.apache.maven.lifecycle.LifecycleExecutionExceptio
maven在build构建时,加载资源文件时需要配置资源文件插件: 1,在pom.xml文件中加入 <build> <finalName>${project.build.tar ...
- HDU 1827:Summer Holiday(强连通)
http://acm.hdu.edu.cn/showproblem.php?pid=1827 思路:强连通分量缩点后找入度为0的点,然后对于属于该强连通分量的找一个最小耗费的入口. #include ...
- HDU 1269:迷宫城堡(强连通)
http://acm.hdu.edu.cn/showproblem.php?pid=1269 题意:确定是否是一个强连通图. 思路:裸的tarjan算法. #include <cstdio> ...
- myeclipse的快捷键和myeclipse快捷键设置
1.Ctrl+M切换窗口的大小 2.Ctrl+Q跳到最后一次的编辑处 3.F2当鼠标放在一个标记处出现Tooltip时候按F2则把鼠标移开时Tooltip还会显示即Show Tooltip D ...
- extjs 中动态给gridpanel 复选框赋值
最近在搞extjs时需要动态根据数据给gridpanel的复选框赋值 网上看了很多 ,多不行,最后找到一个好使的方法 如下: RBACformPanel.getSelectionModel().sel ...
- ios布局约束
http://blog.csdn.net/pucker/article/details/41843511 除了使用Pin菜单之外,也可以直接在文档结构窗口中或者设计器中通过拖拽建立约束.在文档结构窗口 ...
- Java中Properties类的操作配置文件
知识学而不用,就等于没用,到真正用到的时 候还得重新再学.最近在看几款开源模拟器的源码,里面涉及到了很多关于Properties类的引用,由于Java已经好久没用了,而这些模拟器大多用 Java来写, ...