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

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

tdtcn

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

阅读量6.9k

点赞数

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

本文链接：https://blog.csdn.net/tdtcn/article/details/50055501

版权

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

摘要由CSDN通过智能技术生成

主页代码：

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