HTML5自适应：max-width和min-width

最新推荐文章于 2024-05-10 00:07:45 发布

原创最新推荐文章于 2024-05-10 00:07:45 发布 · 7.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 css3 自适应 #max-width min-width

收录于

html5 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了HTML5中max-width和min-width属性在实现页面自适应布局中的作用。通过一个实例展示了如何设置背景颜色，以达到在不同屏幕尺寸下显示不同颜色的效果。当浏览器宽度小于600px时，页面背景为红色；大于600px时，背景为黄色。关键在于正确使用这两个属性来控制元素在不同设备上的表现。

主页代码：

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" media="screen and (max-width: 600px), screen and (max-device-width: 600px)" href="style.css" />
    <link rel="stylesheet" media="screen and (min-width: 600px), screen and (min-device-width: 600px)" href="style.css" />
</head>
<body>

</body>
</html>

css代码：

@media  screen and (max-width: 600px) ,screen and (max-device-width: 600px){
    body{
        background-color:red;
    }
}

@media  screen and (min-width: 610px) ,screen and (min-device-width: 610px){
    body{
        background-color:yellow;
    }
}

此时如果background-color:red !important;不加!important的话背景只会是黄色。
如果不加!important要实现浏览器小于600px页面是红色、大于600px页面是黄色则css文件要改成：

@media  screen and (min-width: 610px) ,screen and (min-device-width: 610px){
    body{
        background-color:yellow;
    }
}


@media  screen and (max-width: 600px) ,screen and (max-device-width: 600px){
    body{
        background-color:red;
    }
}

具体原因不清楚。