媒体查询及响应式布局

最新推荐文章于 2025-03-24 20:25:43 发布

YourLie_in_April

最新推荐文章于 2025-03-24 20:25:43 发布

阅读量291

点赞数 1

分类专栏： HTML、CSS 文章标签：前端

本文链接：https://blog.youkuaiyun.com/YourLie_in_April/article/details/124172554

版权

HTML、CSS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了媒体查询@media的应用，包括screen、print等不同设备类型的判断，以及max-width和min-width在设置屏幕显示条件中的作用。同时提到了理想视口meta标签的使用，如width=device-width和initial-scale=1.0，以及em和rem单位在响应式设计中的角色。最后，作者给出了一个当页面宽度小于600px时的实践例子，并邀请读者提供反馈。

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

@media： 通过对属性进行验证，确认是否被选中，添加样式。

screen：就表示所有的电子设备的屏幕、print：表示打印机的屏幕、all：表示所有、and：和，两个条件之间需添加（前后需要添加空格）。

max-width： 表示小于等于这个宽度的时候屏幕显示、min-width： 表示大于等于这个宽度的时候屏幕显示。

小知识点：

meta name="viewport" 理想视口。

width=device-width 显示的宽度为设备的宽度。

initial-scale=1.0 是否对屏幕的尺寸进行缩放 1.0表示不缩放。

em： 相对于父元素的大小。

rem： 相对于根元素html的大小。

小练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        html{
            font-size: 10px;
        }
        .nav{
            background: #87CEEA;
        }
        li{
            line-height: 3rem;
            color: white;
        }
        li:hover{
            background: #00AEEA;
        }
        .nav ul{
            display: flex;
            align-items: center;
        }
        .nav ul li{
            padding: 0 1rem;
        }
        @media screen and (min-width:60rem) and (max-width:80rem){
            .nav ul{
                justify-content: space-around;
            }
        }
        @media screen and (max-width:59.9rem){
            .nav ul{
                flex-wrap: wrap;
            }
            .nav ul li{
                width: 100vw;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>首页</li>
            <li>简介</li>
            <li>公司介绍</li>
            <li>联系我们</li>
        </ul>
    </div>
</body>
</html>

页面宽度大于 800px 的时候：