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 ...
随机推荐
- 颜色表及html代码
颜色名称及色样表(HTML版) 颜色名 中文名称 Hex RGB 十进制 Decimal LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FF ...
- Java String类中的intern()方法
今天在看一本书的时候注意到一个String的intern()方法,平常没用过,只是见过这个方法,也没去仔细看过这个方法.所以今天看了一下.个人觉得给String类中加入这个方法可能是为了提升一点点性能 ...
- paste DEMO合并文件
测试数据: [xiluhua@vm-xiluhua][~]$ cat msn.txt aaa bbb bbb ccc ccc ddd bbb eee aaa ccc bbb sss [xiluhua@ ...
- Oracle游标练手实例
--声明游标:CURSOR cursor_name IS select_statement --For循环游标 --(1)定义游标 --(2)定义游标变量 --(3)使用for循环来使用这个游标 de ...
- 系统图片uri的问题
调用系统图库会出现两种uri的问题,一个是在文件管理器中的图库中,获取到的地址为:content://media/external/images/media/972 这种格式 另外一种的是系统文件管 ...
- ACM题目————图的广度优先搜索
题目描述 图的广度优先搜索类似于树的按层次遍历,即从某个结点开始,先访问该结点,然后访问该结点的所有邻接点,再依次访问各邻接 点的邻接点.如此进行下去,直到所有的结点都访问为止.在该题中,假定所有的结 ...
- android技术总结
1.要做一个尽可能流畅的ListView,你平时在工作中如何进行优化的? ①Item布局,层级越少越好,使用hierarchyview工具查看优化. ②复用convertView ③使用ViewHol ...
- css3 动画 执行一次
function testAnim(x) { $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitA ...
- YTU 2924: 文件操作--二进制文件读入
2924: 文件操作--二进制文件读入 时间限制: 1 Sec 内存限制: 128 MB 提交: 58 解决: 20 题目描述 现有100名学生的姓名(name).学号(num).英语(Engli ...
- 华东交通大学2016年ACM“双基”程序设计竞赛 1004
Problem Description LB是个十分喜欢钻研的人,对什么事都要搞明白.有一天他看到一个公式,((a-b)*c+d*e)/f=k.他想如果给定K的值,一共有多少种不同整数的组合(a,b, ...