媒体查询

最新推荐文章于 2025-05-07 19:56:02 发布

原创最新推荐文章于 2025-05-07 19:56:02 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

HTML&CSS 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了布局视口、可视视口和理想视口的概念，并解析了媒体查询中em和rem单位的使用，通过具体示例展示了不同屏幕尺寸下的样式调整策略。

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

在这里插入图片描述

布局视口相当于书，可视视口相当于放大镜，
理想视口：

<meta name="viewport" content="width=device-width" />

在媒体查询中的em和rem不是相对于父元素或根元素，它是最高级别的相对于浏览器，即1rem = 16px

@media only screen and (max-width: 50em) {
    header .top ul li a {
        padding: 0 1rem;
    }
}

@media only screen and (min-width: 30.0625em) and (max-width: 50em) {

}

@media only screen and (max-width: 30em) {
    header .top .tel,
    header .top ul li:nth-child(3),
    header .top ul li:nth-child(4) {
        display: none;
    }
}