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

最新推荐文章于 2025-02-20 14:45:57 发布

tdtcn

最新推荐文章于 2025-02-20 14:45:57 发布

阅读量7k

点赞数

分类专栏： html5 文章标签： html5 css3 自适应 max-width min-width

本文链接：https://blog.youkuaiyun.com/tdtcn/article/details/50055501

版权

html5 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主页代码：

<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;
    }
}

具体原因不清楚。