CSS3系列 16 响应式布局_css3响应式布局-CSDN博客

本文链接：https://blog.csdn.net/weixin_43422005/article/details/118971894

本文详细介绍了CSS3中的媒体查询，用于实现响应式布局。内容包括媒体类型、link与style中的媒体查询、@import的使用、@media规则、逻辑与、逻辑或、逻辑非的操作以及only的用法。还讲解了常见的查询特性，如设备宽度和屏幕方向的响应，并提供了代码示例。最后讨论了设备像素、初始样式重置和自动响应设计的实践方法。

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

媒体查询

媒体查询是响应式布局中非常常用的一种手段，在学习媒体查询之前要先了解什么是响应式。

所谓响应式即在不同尺寸屏幕设备上响应的内容不同

相信在之前你写的页面在PC端看非常华丽工整，但是一拿到移动端全部乱了套，这就是因为没有对页面做响应式处理。

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

媒体类型

选项	说明
all	所有媒体类型
screen	用于电脑屏幕，平板电脑，智能手机等
print	打印设备
speech	应用于屏幕阅读器等发声设备

另外还有很多设备类型，如tty, tv, projection, handheld, braille, embossed, aural 等等，但是这些类型已经被废弃。

可以使用 link 与 style 中定义媒体查询
也可以使用 @import url(screen.css) screen 形式媒体使用的样式
可以用逗号分隔同时支持多个媒体设备
未指定媒体设备时等同于all

style

下面我们来感受一下在screen屏幕设备与print打印设备上同一个元素给出的不同响应。

在screen上响应出红色，而在print上响应出绿色。

我们平时用的style并未指定media，此时默认为all，即所有媒体设备。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style media="screen">
        h1 {
            color: red;
        }
    </style>
    <style media="print">
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>
        屏幕设备上显示红色打印设备上显示绿色
    </h1>
</body>

</html>

link

在 link 标签中通过 media 属性可以设置样式使用的媒体设备。

common.css 没有指定媒体所以全局应用
screen.css 应用在屏幕设备
print.css 应用在打印设备

我们平时用的link并未指定media，此时默认为all，即所有媒体设备。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./screen.css" media="screen" type="text/css">
    <link rel="stylesheet" href="./print.css" media="print" type="text/css">
</head>

<body>
    <h1>
        屏幕设备上显示红色打印设备上显示绿色
    </h1>
</body>

</html>

@import

使用@import 可以引入指定设备的样式规则。文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。

/* 引入全局的CSS样式 */
<link rel="stylesheet" href="style.css">

/* 在全局的CSS样式中分别导入不同设备的CSS样式 */
@import url(screen.css) screen;
@import url(print.css) print;

@media

可以使用 @media 做到更细的控制，即在一个样式表中为多个媒体设备定义样式。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen {
            /* 屏幕设备 */

            h1 {
                color: red;
            }
        }

        @media print {
            /* 打印设备 */

            h1 {
                color: green;
            }
        }
    </style>
</head>

<body>
    <h1>
        屏幕设备上显示红色打印设备上显示绿色
    </h1>
</body>

</html>

多媒体支持

前面已经说过，如果没有进行限制media则默认是all，all代表全部，如果我们只想让一部分媒体设备应用样式，则可以使用逗号将它们分开。

@import url(screen.css) screen,print;

<link rel="stylesheet" href="screen.css" media="screen,print">
 
@media screen,print {...}

查询条件

可以使用不同条件限制使用的样式

注意：条件表达式需要放在扩号中

逻辑与

需要满足多个条件时才使用样式，多个条件使用and 连接。下例中满足以下要求才使用样式。

横屏显示
宽度不能超过768px

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (orientation: landscape) and (max-width: 768px) {

            /* 屏幕设备  必须是宽屏 宽度小于768px */
            h1 {
                color: red;
            }
        }
    </style>
</head>

<body>
    <h1>
        必须是屏幕设备并且宽度小于768px
    </h1>
</body>

</html>

逻辑或

多个或条件查询使用,逗号连接，不像其他程序中使用 or 语法。

下面的示例中如果设备是横屏显示或宽度不超768px时就使用样式规则。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (orientation: landscape),
        screen and (max-width: 768px) {

            /* 屏幕设备  必须是横屏 宽度小于768px */
            h1 {
                color: red;
            }
        }
    </style>
</head>

<body>
    <h1>
        必须是屏幕设备并且是横屏显示
        或者是屏幕设备并且宽度小于768px
    </h1>
</body>

</html>

逻辑非

not 表示不应用样式，即所有条件都满足时不应用样式。

必须将not写在查询的最前面

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media not screen {
            h1 {
                color: red;
            }
        }
    </style>
</head>

<body>
    <h1>
        如果是屏幕设备则不应用 反之 如果是不是屏幕设备则应用
    </h1>

</body>

</html>

only

用来排除不支持媒体查询的浏览器。

对支持媒体查询的设备，正常调用样式，此时就当only不存在
对不支持媒体查询的设备不使用样式
only 和 not 一样只能出现在媒体查询的开始

/* 必须支持媒体查询 必须是屏幕设备并且是横屏显示还有最小宽度为768px */
@media only screen and (orientation: landscape) and (max-width: 768px) {
    ...
}

查询特性

根据查询特性筛选出使用样式的设备。

常用特性

下面列出常用的媒体查询特性

特性	说明
orientation: landscape \| portrait	landscape横屏，portrait竖屏
width	设备宽度
height	设备高度
min-width	最小宽度（可以理解为大于该数值即成立）
max-width	最大宽度（可以理解为小于该数值即成立）
min-height	最小高度（可以理解为大于该数值即成立）
max-height	最大高度（可以理解为小于该数值即成立）

使用示例

在设备宽度为568px时使用样式

@media only screen and (width:568px) {
    ...     
}

在设备大于 569px时使用样式

@media only screen and (min-width:569px) {
    ...
}

橫屏设备并且宽度大于569px时使用样式

@media only screen and (orientation: landscape) and (min-width:569px) {
    ...
}

响应尺寸

设备像素

不同设备的像素尺寸差异很大，比如2K的27寸屏幕与4K的27寸屏幕的像素数量是不一样的。如果我们编写CSS时还要判断设备的物理像素就会很麻烦。

我们希望编写CSS时还是按照以往方式编写，至于具体绘制到屏幕上使用的具体像素让浏览器或小程序等自动计算就可以，这是最佳解决方案。

使用以下代码可以轻松解决上面的问题了。（在<head>标签中插入）

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

初始样式

有些标签默认含有内外边距，且不同浏览器大小也不一样。为了统一我们可以重置标签的CSS默认样式。

最简单的方式就是使用插件css-reset完成

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />

自动响应

实际操作中不同设备只能取宽或高一个尺寸为响应处理，一般情况下我们取宽度响应，高度自动处理。小尺寸时高度产生滚动条，这并不影响什么。

计算公式：

使用rem单位来处理响应，因为改变rem单位会影响所有使用rem的元素，这确实非常的方便。

rem是在根元素中定义的font-size
rem用来在多个设备响应处理时使用
html元素也可以使用:root选择器选择

另外还有一个单位即vw与vh

100vw表示100%设备宽度
100vh代表100%设备高度
因为使用了vw宽度系统会根据不同设备自动计算rem

:root{
    font-size:15px;  
}