CSS 媒体查询

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

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

.text {
  font-size: 14px;
}

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

语法

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

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

all——用于所有媒体类型
print——用于打印机
screen——用于计算机屏幕，平板电脑和智能手机
voice——用于大声“阅读”页面的屏幕阅读器

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

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

常见断点

320px — 480px：移动设备
481px — 768px：iPad，平板电脑
769px — 1024px：小屏幕，笔记本电脑
1025px — 1200px：台式机，大屏幕
1201px 及以上：超大屏幕电视

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

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

例子

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

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

引入资源

在样式比较繁琐时，可以直接在link中判断设备尺寸，引用不同的css文件，例如

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

媒体查询一般以从小到大的方式写

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

CSS 媒体查询

语法

常见断点

例子

引入资源

猜你喜欢