浅谈CSS3 Media Query的使用方法

陆郁

摘  要：网页设计人员都希望开发的网页可以适用于各种终端设备上，使浏览者可以完整、友好地浏览网页。响应式布局的提出恰恰可以满足这一需求。而响应式布局的关键就是要通过Media Query媒介查询对终端设备的显示尺寸进行检测。该文分别对Media Query媒介查询、Media Query使用及其优、缺点进行阐述，希望对网页设计人员在实现响应式布局时有所幫助。

关键词：响应式布局  Media Query  CSS

中图分类号：TP393    文献标识码：A 文章编号：1672-3791（2019）09（c）-0022-02

随着信息技术的不断发展，网页访问的终端设备也在不断增加。如何为不同终端的浏览者提供更为完整、友好的界面成为网站设计人员共同思考的问题。无论是在手机、平板电脑，还是在超大屏移动设备上，访问者都希望能够看到适合于自己屏幕的网页。响应式布局理念的提出，为网页设计人员打开了一扇大门。网页设计人员可以通过对访问终端的检测信息反馈，从而获取屏幕尺寸，使网页按照显示比例给予呈现。CSS3中的Media Query媒介查询就可以简单、快捷地实现这一功能，从而为网页设计人员实现响应式布局提供了有力的保障。

1  CSS3中的Media Query（媒介查询）

无论是从iPhone手机的320px还是大屏显示器2560px，网页总会以一种自适应的方式完美呈现给浏览者。这就需要在网页显示之前对访问终端设备的屏幕尺寸的检测，并根据不同尺寸将网页内容按CSS设置分别给予显示。Media Query可以对输出设备的屏幕可见高度、最大高度、最小高度;屏幕可见宽度、最大宽度、最小宽度;页面可见区域高度、最大高度、最小高度;页面可见区域宽度、最大宽度、最小宽度等媒介特征给予检测。Media Query对设备终端的显示尺寸可以根据每个网页设计人员不同的设计需求来进行反馈。其语法是：

@media 媒体终端 and|not|only （媒介特征）

{显示设置内容}

其中，主流浏览器都支持"screen"（计算机屏幕）、"print"（打印预览模式 / 打印页）以及 "all" （适合所有设备）这3项设置。

2  Media Query的使用

2.1 在中使用

标记是HTML语言中用于链接样式表的标记语言，它放于标记部分。它有rel、href、media、sizes等属性，其中media属性就是设置被链接文档将显示在外部访问终端上。例如：。

2.2 在CSS中使用

CSS可以为超文本编辑语言（HTML）或可扩展标记语言（XML）提供文件样式的设定，例如，对文字的字体、字号、颜色等的设定。CSS对这些标记进行设置时，要求设置内容需用花括号包围起来，所以在CSS中使用media query，需要检测满足条件时，CSS设定才会有效。例如：

@media screen and（max-width：320px）

{.row{width：100%;}}

2.3 在Improt中使用

如果一组样式设定需要反复使用，那么我们可以将这组CSS设定放在一个文件中，如果需要，可以随时将其导入。@import则可以实现这一功能。结合于media query检测反馈信息，当条件被满足时，使用@import将外部CSS文件导入。此时，写在外部CSS样式文件中的样式设定才会有效。例如：

@import url（"bujuyangshi1.css"） screen and（max-width：320px）;

3  响应式布局的优点和缺点

3.1 响应式布局的优点

网页的显示效果可以根据不同的访问终端进行合理的响应和调整。无论浏览者是通过笔记本还是手机终端，页面都可以通过Media Query媒介查询之后自动切换分辨率，按照显示比例对图片尺寸进行调整，对显示文字字号及行容量进行掌控，甚至对相关脚本都可以满足不同访问终端的使用需求。这种网页布局方式，可以兼容现在及未来不同机型，具有前趋性。并且，响应式布局是针对页面的设计，对于其开发、运营和后期维护相对多个版本成本会降低，也减少了网站维护人员的工作量。

3.2 响应式布局的缺点

由于响应式布局需要满足不同显示比例的设备输出，所以它需要设定不同的CSS及脚本代码。这就使网页在显示加载时的速度会受到一定的影响，特别是一些大型的门户型网站或图片、视频较多的电子商务型站，会使其运行速度降低。而且，终端屏幕尺寸的使用比率是不同的，这就会使一些CSS设定使用率较低，既造成了加载负荷又使代码造成冗余。

4  结语

总之，响应式网页布局是使用Media Query媒介查询来设置CSS样式，以适应不同访问终端屏幕的使用需求，使浏览者可以在不同的访问设备下进行网页浏览。希望网页设计人员可以解决它的CSS多重设置问题，从而使其更适合现在网页浏览需求的布局方式。

参考文献

[1] 彭雪萍.试析响应式网页的设计与开发[J].电脑编程技巧与维护，2018（10）：8-10.

[2] 叶潮流，马林山.基于HTML5+CSS3+jQuery的响应式布局网页设计[J].梧州学院学报，2018，28（3）：22-35.

[3] 徐健.响应式网页设计案例实现与分析[J].信息与电脑：理论版，2018（6）：13-15.

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

[5] 洪涛.平面设计专业网页设计课程教学改革研究[J].美术教育研究，2017（18）：90-91.

[6] 陈洁.案例教学法在网页设计教学中的应用研究[J].佳木斯职业学院学报，2017（7）：429-430.

[7] 袁琳.案例教学在计算机网页设计课中的应用[J].新西部：理论版，2016（20）：109，133.

[8] 龙安源.高职院校网页设计人才培养与教学模式的创新与实践[J].科技经济导刊，2016（17）：144.