max(min)-device-width和max(min)-width的区别
2015-12-03 11:18
330 查看
在网页自适应设计中,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的区别和使用有所了解了吧。
看看下面的写法
min-device-width和min-width的区别,跟max-device-width和max-width的区别是一样的。
实例分析
下面是两段css代码
代码1:
代码2:
在PC机上打开网页,用Firefox浏览器,把浏览器缩小到宽度为385px。
上图为使用max-device-width的结果
使用max-device-width时,网页不会随浏览器缩小而自适应变化。
上图为使用max-width的结果
使用max-width后,网页随浏览器缩小而发生自适应变化。
转自http://www.webkaka.com/tutorial/html/2015/082713/
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后,网页随浏览器缩小而发生自适应变化。
转自http://www.webkaka.com/tutorial/html/2015/082713/
相关文章推荐
- online_judge_1011
- Android的assets文件夹资源访问
- CodeBlocks Package conficts
- linux应用编程笔记(14)共享内存编程
- 北京Uber优步司机奖励政策(12月3日)
- 转载:《TypeScript 中文入门教程》 7、模块
- UVA - 11732 "strcmp()" Anyone?左兄弟右儿子trie
- Esper系列(八)Method Definition、Schema
- django-templates
- django-models
- 实验三 进程调度模拟程序
- 使用NeoBundle管理vim插件
- ios学习之UIKit框架(1)--UIResponder
- 数学知识
- apache mode_proxy反向代理tomcat
- TextureView官方Demo
- UIWebView之获取所点位置图片URL
- C++之动态链接库和静态链接库归纳…
- CoordinatorLayout和CollapsingToolbarLayout的基本使用方法
- Android service sample (2015.12.3)