CSS 媒体查询

By 刘志军, 2021-05-20, 分类: css

css

媒体查询可根据不同设备设置不同的样式,以此达到真正的响应式布局。

例如下面的媒体查询告诉浏览器,默认情况使用14px字体,如果是最大宽度为480px的移动设备,就使用16px字体。

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

语法

@media [媒体类型] and (condition: breakpoint) {
  // CSS rules
}

媒体类型可以省略,有以下常用值

当只想选择屏幕时,将在 @ media 规则之后设置 screen 关键字。我还必须使用 “and” 关键字将规则连接起来:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

常见断点

要使得响应式生效,必须在 head 中设置 meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

例子

这段代码就是一个响应式设计的例子,页面会根据屏幕的宽度自动调整布局。

media_query.gif

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        body {
            background-color: #ccc;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .left {
            height: 200px;
            background-color: #fff;
            margin-right: 10px;
            margin-bottom: 10px;
            flex: 0 0 25%
        }

        .right {
            height: 200px;
            background-color: #fff;
            flex: 0 0 calc(75% - 10px);
            max-width: 75%
        }


        @media screen and (max-width:500px) {
            body {
                font-size: 1.2rem;
            }

            .left {
                flex: 0 0 100%;
            }

            .right{
                flex: 0 0 100%;
                max-width: 100%
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">
            <p>又过了两天,当他拿着项目方案来的时候,你还是对结果吃了一惊。</p>
        </div>
        <div class="right">
            <p>因为做得太差了。看见方案,你简直想把资料撕得粉碎,最后全都砸在他脸上</p>
        </div>
    </div>
</body>

</html>

有问题可以扫描二维码和我交流

关注公众号「Python之禅」,回复「1024」免费获取Python资源

python之禅

猜你喜欢

2021-06-12
理解border-box
2021-05-20
CSS元素遮挡问题与z-index属性
2019-05-08
CSS块级元素与行内元素
2021-06-01
理解CSS行高line-height
2021-05-26
理解 focus-within 伪类
2020-04-15
重学前端:相对定位VS绝对定位VS固定定位