摘 要：随着智能设备的普及和移动网络的快速发展，越来越多的用户喜欢使用移动设备查询信息，但是传统网页在小型设备上显示效果不佳。响应式网站根据不同规格的屏幕，设计出能够合理显示的网页，较好地提升用户浏览网页的访问体验。文章介绍了使用媒体查询技术设计响应式网页的理论和方法，并以响应式旅游网页制作为例，重点阐述媒体查询技术的运用，为读者提供参考。
关键词：媒体查询；响应式网页；CSS3；HTML5
DOI:10.19850/j.cnki.2096-4706.2023.02.005
基金项目：广西壮族自治区教育厅自然科学类项目资金（2021KY1100）
中图分类号：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
参考文献：
[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—），女，汉族，广西来宾人，讲师，硕士研究生，研究方向：网页制作。