前端笔记：媒体查询和响应式布局

最新推荐文章于 2024-06-21 12:00:00 发布

Naisu Xu

最新推荐文章于 2024-06-21 12:00:00 发布

阅读量4.5k

点赞数 6

分类专栏： Web与JS相关文章标签： css 前端布局 ui 设计

本文链接：https://blog.csdn.net/Naisu_kun/article/details/110823665

版权

Web与JS相关专栏收录该内容

58 篇文章 21 订阅

订阅专栏

文章目录

目的
媒体查询
响应式布局
总结

目的

CSS中有一个叫做媒体查询（Media queries）的功能，这个功能可以让你查询当前运行网页的设备的一些信息，让你可以通过这些信息来调整网页的布局和样式等。常见的响应式布局通常就是利用这个功能来实现的。这篇文章将对相关的功能做个说明。

媒体查询

媒体查询的语法非常简单，大概就是下面的样子：

@media 查询条件 {
    CSS-Code;
}
/* 查询条件可以是媒体类型或是媒体特性 */
/* 也可以是由and、not、only、or修饰组合而成的短语 */
/* 多个条件也可以用 ，（逗号）连接，相当于 or */
/* 媒体特性需要用圆括号包围 */

先看个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        html,body {
            height: 100%;
        }
        /* 页面可见区域宽高比大于等于2/1 */
        @media (min-aspect-ratio: 2/1) {
            body {
                background-color: red;
            }
        }
        /* 页面可见区域宽高比大于等于1/1 小于2/1 */
        @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
            body {
                background-color: yellow;
            }
        }
        /* 页面可见区域宽高比小于等于1/1 */
        @media (max-aspect-ratio: 1/1) {
            body {
                background-color: blue;
            }
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述
媒体查询中的媒体类型主要是下面一些：

值	描述
all	适用于所有设备，默认值
print	适用于在打印预览模式下在屏幕上查看的分页材料和文档
screen	主要用于电脑屏幕，平板电脑，智能手机等
speech	主要用于屏幕阅读器等发声设备

媒体查询中的媒体特性非常多，这里列出一些常用的：

值	描述
orientation	portrait：网页可见区域高度大于等于宽度 landscape：网页可见区域宽度大于高度
aspect-ratio	网页可见区域宽高比
min-aspect-ratio	网页可见区域最小宽高比
max-aspect-ratio	网页可见区域最大宽高比
width	网页可见区域宽度值
min-width	网页可见区域最小宽度值
max-width	网页可见区域最大宽度值

媒体查询使用时需要注意的是它是CSS的内容，后面的规则会覆盖前面的规则，所以书写的顺序还是需要注意的，不然有可能会出现问题，比如下面例子：
在这里插入图片描述
媒体查询语法上来说使用比较简单，更多内容可以参考下面链接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

响应式布局

响应式布局主要是为了让网页在不同显示设备上以合适的方式显示而出现的一种设计思路。通常来说电脑的显示屏较大，大多都是横屏显示的；手机的显示屏比较小，通常都是竖屏使用的。如果只有一套UI显示的话体验上往往难以兼顾两者，这时候就可以使用响应式布局了。对于小型的网页项目来说目前常见的响应式布局通常就是利用 媒体查询 结合 meta标签的viewport属性 来实现的，下面是个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- 浏览器需要下面一行才能正确响应响应式布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        html,
        body {
            height: 100%;
        }
        body {
            display: flex;
            flex-wrap: wrap;
        }

        .header {
            width: 100%;
            height: 10%;
            background-color: salmon;
        }
        .nav {
            background-color: lightgreen;
        }
        .main {
            background-color: mediumturquoise;
        }
        .footer {
            width: 100%;
            height: 10%;
            background-color: orchid;
        }

        /* 在页面较宽时 */
        @media (min-width: 576px) {
            .nav {
                width: 20%;
                height: 80%;
            }
            .main {
                width: 80%;
                height: 80%;
            }
        }

        /* 在页面较窄时 */
        /* 手机竖着拿的时候页面的CSS像素宽度大多小于576px */
        @media (max-width: 575px) {
            .nav {
                width: 100%;
                height: 10%;
            }
            .main {
                width: 100%;
                height: 70%;
            }
        }
    </style>
</head>
<body>
    <div class="header"> 标题栏 </div>
    <div class="nav"> 导航栏 </div>
    <div class="main"> 正文 </div>
    <div class="footer"> 页脚 </div>
</body>
</html>