max(min)-device-width和max(min)-width的区别

最新推荐文章于 2024-10-05 10:06:16 发布

weixin_33885253

最新推荐文章于 2024-10-05 10:06:16 发布

阅读量96

点赞数

本文详细解析了max-device-width与max-width这两个CSS属性的区别，包括它们的应用场景及效果对比，帮助读者更好地掌握网页自适应设计技巧。

在网页自适应设计中，max-device-width和max-width是不可缺少的两大CSS属性，但是可能大家在使用的选择上没有太多讲究，

认为用其中一个即可。确实，如果没有特定要求，用任何一个都没有什么问题，不过如果你对此两个属性有了充分的认识之后，

或许就可以网页的自适应设计得更为极致一些

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

如下CSS代码:
/* #### 移动设备 #### */
@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的区别是一样的

实例分析

代码1：

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

代码2：

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

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

使用max-device-width的结果的结果如下：网页不会随浏览器缩小而自适应变化

使用max-width的结果如下：网页随浏览器缩小而发生自适应变化

【转载:http://www.webkaka.com/tutorial/html/2015/082713/】