微信公众号制作开发 微信小程序定制开发 网站建设制作 手机app软件开发

您的位置:首页 > 技术观点 > 信息详情

响应式布局中max(min)-device-width和max(min)-width的区别

来源:山东鸿软信息科技有限公司  阅读量:  时间:2016-08-27 22:08
在网页自适应设计中,max-device-width和max-width是不可缺少的两大CSS属性,但是可能大家在使用的选择上没有太多讲究,认为用其中一个即可。确实,如果没有特定要求,用任何一个都没有什么问题,不过如果你对此两个属性有了充分的认识之后,你或许把网页的自适应设计得更为极致一些。

在网页自适应设计中,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后,网页随浏览器缩小而发生自适应变化。


成为您更加专业的技术合伙人

网站建设 | APP开发 | 产品服务 | 技术观点 | 关于我们      电话:151-6502-2080  客服QQ:1828087588、1421667633  客服电子邮箱:1828087588@qq.com

Copyright © 2018 山东鸿软信息科技有限公司 版权所有 https://www.greatsoft.cn 鲁ICP备16026454号