响应式网页设计中媒体查询的应用和实现

姚馨 黎明明 邓丽萍

摘  要：随着智能设备的普及和移动网络的快速发展，越来越多的用户喜欢使用移动设备查询信息，但是传统网页在小型设备上显示效果不佳。响应式网站根据不同规格的屏幕，设计出能够合理显示的网页，较好地提升用户浏览网页的访问体验。文章介绍了使用媒体查询技术设计响应式网页的理论和方法，并以响应式旅游网页制作为例，重点阐述媒体查询技术的运用，为读者提供参考。

关键词：媒体查询；响应式网页；CSS3；HTML5

中图分类号：TP311 文献标识码：A  文章编号：2096-4706（2023）02-0018-05

Application and Implementation of Media Query in Responsive Web Design

YAO Xin， LI Mingming， DENG Liping

（Guangxi Vocational College of Water Resources and Electric Power， Nanning  530001， China）

Abstract： With the popularity of smart devices and the rapid development of mobile network， more and more users like to use mobile devices to query information， but traditional Web pages do not display well on small devices. Responsive websites design Web pages to display reasonably according to different screen sizes， which can better enhance the user's experience of browsing Web pages. This paper introduces the theory and method of designing responsive Web pages by using media query technology， and takes the production of responsive travel Web pages as an example， focuses on the application of media query technology， to provide reference for readers.

Keywords： media query; responsive Web; CSS3; HTML5

0  引  言

2022年中国互联网络信息中心发布的中国互联网络发展状况统计报告显示，我国网民使用手机、台式电脑、笔记本电脑和平板电脑上网的比例分别为99.7%、35.0%、33.0%和27.4%，手机成为上网最主要的设备，“移动优先”原则逐渐突出。如果期望网站可以在各种设备上都能拥有出色的用户体验，那么就需要在不同的平台上提供不同的网站界面。为了解决移动设备屏幕大小不同的问题，使网站适应不同设备的屏幕大小，创建了响应式网站。响应式布局是2010年提出的网页设计理念，就是一个网站能够兼容多种类型终端，而不需要为每个终端设计一个特定的版本，这是为解决移动互联网网页浏览而诞生的。为了使网页能根据终端屏幕的宽度，做出对应的调整，以使得不同的设备下网页内容能以合适、美观的方式展现，出现了响应式网页制作的四个解决方案：相对尺寸单位、屏幕断点、弹性布局、栅格系统。媒体查询就是屏幕中断点的具体实现技术，本文主要介绍媒体查询的原理和使用方法。

1  媒体查询技术

CSS的媒体查询技术是可以根据窗口的宽度、设备的分辨率以及设备方向等差异来改变页面的显示效果。

1.1  媒体查询的语法结构

Html4和CSS可以支持为不同的媒体类型（屏幕和打印设备）设置特定的CSS样式。CSS3之后，扩展了媒体查询功能。您不仅可以查询媒体类型，还可以查询与媒体相关的属性。例如，可以使用不同的CSS代码或CSS文件根据显示宽度、设备方向等的差异更改页面的外观。

媒体查询由媒体类型和条件表达式组成。其语法格式为：

媒体查询语句是用“@media”来声明的，然后通过运算符and|not|only将媒体类型或媒体特性结合成媒体查询规则，当查询规则为真时，根据样式代码将各个选择器的样式生效。

1.2  媒体类型

媒体类型用于表示设备类别。CSS提供了一些关键字来表示不同类型的媒体，常用的有all和screen。all代表所有媒体设备，screen代表电脑显示器、智能手机和平板电脑。然后有print是代表打印設备。

1.3  媒体功能

除了特定类型之外，还可以使用一些属性来描述特定的设备属性，例如宽度、高度、分辨率等。max-width是媒体属性中最常用的，这意味着，如果媒体类型小于或等于指定的宽度，则样式将生效。min-width与max-width恰好相反，也就是说，当媒体类型大于或等于指定的宽度，样式则生效。

@media （max-width： 1200px）{ /*当屏幕小于1200px时*/

/*样式设置*/

}

@media （max-width： 980px）{ /*当屏幕小于980px时*/

/*样式设置*/

}

@media （max-width： 768px）{ /*当屏幕小于768px时*/

/*样式设置*/

}

CSS代码是自上而下执行的，因此使用max-width分隔屏幕时，必须遵循从大屏幕到小屏幕的顺序。如果使用min-width来区分屏幕，则写入顺序是从小屏幕到大屏幕。

1.4  多种媒体特性的使用

媒体查询的主要功能是实现响应，在一定条件下运行样式，实现页面响应的效果。可以与逻辑运算符结合使用，不仅如此，还能联合构造复杂的媒体查询。

1.4.1  and运算符

and运算符类似于JavaScript中的逻辑与运算符。只有当所有的查询条件都满足时，才会返回true。它可以把多个媒体查询规则合并成一个媒体查询，甚至，还能把媒体类型与媒体功能结合到一条查询规则中。

@media screen and （min-width：420px） and （max-width：970px） {

.box{ background-color： #E8DBB5; }

}

上面的代码段表示，当媒体类型为screen且屏幕宽度在420 px和970 px之间时，类名为.box的盒子的背景色呈现为#E8DBB5。

1.4.2  not运算符

not运算符用于否定媒体查询命令，很像JavaScript中的逻辑非运算符。

@media not print and （max-width：970px）{

.box{ width：500px;  margin：0 auto; }

}

上述代码段表示打印设备并且设备宽度不超过970 px，类名为.box的盒子不使用样式代码。

1.4.3  only运算符

only运算符用于确定特定类型的媒体。

@media only screen and （max-width：970px）{

.box {  font-size： 24px; color：blue; }

}

上述代码段表示，如果媒体类型为screen，且屏幕宽度不大于970 px，则类名为.box的盒子里面的文字颜色为蓝色，字体大小为24 px。

1.5  媒体查询方法

1.5.1  设置meta标签

在HTML5中，您可以通过标签来配置所显示端口的属性。使用媒体查询时，必须设置标签才能让页面在浏览器中用理想的视口显示，把name属性设置为viewport，就可以设置视口。

在上面的代码中，width用于设置视窗视口的宽度，即网页宽度。width=device-width意味着视窗视口的宽度与可见显示器的宽度（设备宽度）相同；user-scalable用于设置用户是否可以改变屏幕的大小，默认值为yes，但是一般是不建议让用户缩放屏幕的，所以该值设置为no；initial-scale用于设置初始缩放比例，默认值为1.0；maximum-scale用于设置最大缩放比例，默认值为1.0。

1.5.2  加载IE兼容JS插件

IE8不支持HTML5或CSS3媒体查询，但由于IE8在中国仍占有很大的市场份额，因此在创建网站时应特别考虑这些用户的兼容性。必须加载两个外部JS文件以确保代码兼容性。

1.5.3  设置浏览器的渲染方式为最高

将默认IE浏览器渲染模式设置为计算机上安装的最高IE浏览器标准。

1.5.4  编写媒体查询的CSS代码

@media （max-width： 768px）{ /*当屏幕小于768px时*/

/*样式设置*/

}

上述代码段是指当屏幕宽度小于768 px时会响应样式设置。

2  实现响应式网页设计案例

2.1  开发方案

目前，市场上主要有两种移动Web开发方案：一种是独立创建移动终端页面，另一种是提供与PC和移动终端兼容的响应式网站。

一般来说，移动终端页面的创建不会改变原来的PC终端页面，而是为移动终端开发一个特定版本，并在网站的域名中使用代表移动终端网站的二级域名“m”。这种网站的优点是，它可以充分考虑平台的局限性和优势，创造良好的用户体验设计，并且可以在移动设备上更快地加载网站。由于创建移动网站本身会生成多个URL，因此重定向移动网站需要一些时间。同时，有必要对搜索引擎进行处理，这些都将增加维护成本。此外，可能需要為不同的屏幕大小创建多个站点，这对开发人员来说是一个巨大的工作量。

在页面实现过程中，作者选择了第二种开发方案即创建响应页面。响应页面是指同一页面可以在不同的屏幕大小下实现不同的布局，从而使页面可以与不同的终端兼容。响应式网页发展主要是解决移动互联网浏览问题，通过响应性设计，该网站可以在手机和平板电脑上获得更好的浏览和阅读体验。在开发移动终端页面时，编辑浏览器窗口时，通过评估浏览器窗口的宽度来改变样式，并根据浏览器窗口的大小重新显示页面结构，以适应不同的移动终端设备。

2.2  设计思路

响应性页面设计和实现是要求相同的内容在不同宽度的布局设计。有两种方式：PC优先（从计算机端向下设计）和mobile优先（从移动端向上设计）。

mobile first responsive布局采用渐进式改进的原则。创建响应式网站时，首先创建移动版本，然后随着平板电脑版本和桌面版本的引入，页面将逐渐变得更加复杂，这是一个渐进的过程。功能是使用min-width来匹配页面的宽度。当从上到下写入时，首先考虑使用移动设备的场景。默认情况下，它按屏幕最窄的情况输出，然后考虑逐步扩展设备屏幕。

中断点是网站某些部分发生变化的关键点。本案例主要涉及在不同视图宽度下更改网站的布局。例如，如果显示宽度小于或等于768 px，mission-left模块是被隐藏起来的；如果显示宽度介于768 px至1 200 px之间，网站依然采用单列布局，这时mission-left模块被加载，在mission-right模块上方；当显示宽度继续增大，大于1 200 px时，这时网页布局由原来的单列变为两列布局，mission-left模块和mission-right模块并列在页面中。由于网站布局在显示宽度为768 px和1 200 px时发生了变化，因此这两个点被称为中断点。为了更好地了解不同屏幕大小下网页的布局效果，可以通过绘制中断点图来协助进行布局设计。本案例的中断点图如图1所示。

2.3  编码实现

创建新的HTML代码并在页面上输入以下代码：

header

banner

container

mission-header

mission-container

mission-left

mission-right

footer

在HTML文件中，給最外层的父div命名为“box”，里面从上到下包含了网页的四个子div，分别是页眉“header”“banner”、主体“container”和页脚“footer”。“mission-left”模块在“container”里面。

2.3.1  在移动设备上显示

当网站由于空间小而显示在手机等小型设备上时，需要对显示内容进行优先排序，突出显示主要功能模块，并确保用户不会错过关键信息。一些不是很必要的模块，可以先不加载。在本案例中，显示尺寸在768 px以下时，“mission-left”模块不加载。

关键CSS代码：

.mission-div { border：#000000 1px solid; width： 85%;

height： 360px; margin： 0px auto 15px; }

.mission-left { background-color： mediumturquoise;

display： none; }

.mission-right { background-color： darkgoldenrod;}

为了更好地观察页面的制作效果，可以给盒子元素设置宽、高、背景颜色或者边框等属性。为了避免各元素紧挨排列，可使用外边距margin属性来调节。此外，还可以用百分比布局代替固定布局，那么页面的宽度是会随着视口的大小而改变，这样能更好地兼容市面上的多种设备。上述代码表示“mission-left”和“mission-right”模块宽度占父元素的85%，并在父元素内水平居中。其中给“mission-left”设置了display： none;属性，这时该元素将不显示在页面中。

2.3.2  平板显示器

中屏幕设备（平板电脑或大尺寸手机横屏）有相对自由的空间，可以显示所有内容模块。本案例中，显示尺寸在768 px到1 200 px之间，所有模块都会被显示在页面中，这时原来小屏幕不显示的“mission-left”模块可以使用display： block;语句将其显示出来，其他样式都继承原来小屏幕的样式设置，和“mission-right”模块并列呈现在其父元素“mission-div”中。

关键CSS代码：

@media （min-width：768px） {

.mission-left { display： block; }

}

2.3.3  在桌面设备显示

由于大屏幕设备（笔记本电脑或宽屏显示器）的显示面积较大，通常采用两列或三列布局。两列或三列布局的关键点是为元素的宽度属性设置适当的百分比，并使用浮动属性。本案例中，显示尺寸大于1 200 px，使用两列布局，所有模块都被显示在页面中。

关键CSS代码：

@media （min-width： 1200px） {

.mission-div { width：44%; float：left; margin：0 30px;}

}

2.4  顯示网页效果

通过编码，实现了一个响应式网站“框架”的构建。如图2所示。

此外，需要根据框架添加特定内容，例如网站徽标、导航菜单、轮播图或焦点图以及各种功能门户。在“移动版”的显示效果中，除了根据需要隐藏一些功能模块外，还可以创建汉堡菜单，以提高对站点前端宝贵屏幕空间的使用。此外，对于编辑网站而言，媒体查询最重要的事情是仔细编码，并确保网站有细微的变化，以提升用户体验。如图3所示为响应式网页在不同视口的布局效果。

3  结  论

当前，响应式网站设计已经成为网站发展的一种非常重要的方式，然而，由于自身的局限性，响应式网站也在不断创新和发展。从上述案例可以看出，对于网站前端开发人员来说，在充分掌握基础技术的情况下，使用媒体查询技术可以更快地实现响应式网页的设计，通过增加适量的中断点，为不同终端的用户提供更方便的界面和更好的用户体验。

参考文献：

[1] 陈益全，吴多智.断点在响应式网页设计中的应用研究 [J].微型电脑应用，2016，32（5）：41-43.

[2] 黑马程序员.响应式Web开发项目教程（HTML5+CSS3+

Bootstrap） [M].北京：人民邮电出版社，2017.

[3] 王愉，潘明明.响应式网页设计初探 [J].北京印刷学院学报，2014，22（3）：13-15.

[4] 黄龙泉.媒体查询在响应式网站中的应用 [J].电脑编程技巧与维护，2017（15）：77-79.

[5] 吴多智，陈益全.响应式网页设计案例实现与分析 [J].安徽电子信息职业技术学院学报，2016，15（2）：14-17+23.

作者简介：姚馨（1983.09—），女，汉族，广西来宾人，讲师，硕士研究生，研究方向：网页制作。

收稿日期：2022-07-21

基金项目：广西壮族自治区教育厅自然科学类项目资金（2021KY1100）