引言

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务，而 Gup 中文网则是最受用户欢迎的网站，本次试题将实现 Gulp 中文网的页面响应式。

方法

本次实验主要应用了CSS3中的多媒体查询语句（@media），多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

试题中使用到的css属性：

实验结果与讨论

1. 前期准备工作

   1. 解压基础代码，并打开环境右侧的【Web 服务】
      

   2. 点击F12（F12+Fn）,打开谷歌调试工具
      

   3. 如果对@media属性不熟悉，可在菜鸟教程中学习基础原理
      （链接：https://www.runoob.com/css3/css3-mediaqueries.html）
      

2. 考试需求

   1. max-width 为 1400px 时，页面效果为导航栏、中间列表内容的宽度变为900px。

      /* CSS3的多媒体查询 */ @media screen and (max-width:1400px) { nav .content, main.clear section, main.clear ul { /* !importanrt可以覆盖父级的样式,使浏览器首先执行该语句 */ width: 900px !important; } }

      
      2.2宽度max-width为900px时，页面效果为导航栏、中间列表内容宽度变为700px

      /* 格式需要规范，空格不能少 */ @media screen and (max-width: 900px) { nav .content, main.clear section, main.clear ul, main.clear ul li { width: 700px!important; } }

      
      2.3 宽度 max-width 为 650px 时，头部导航隐藏，并在右侧显示图标，底部列表的宽度为 100%。

      @media screen and (max-width:650px) { .list{ /* 隐藏列表 */ display: none; } footer{ width: 100% !important; } nav .content .menu { display: block; /* 绝对定位 */ position: absolute; /* 距离可参考左边的h1标签 */ top: 13px; right: 10px; } }

      

3. 完整实验代码

结语

本次实验解决的问题为Web蓝桥杯线上模拟赛：响应式Gulp中文网,运用技术Css3中的@media（多媒体查询）样式,解决问题时需要重点关注@media的书写格式、css的类选择器名、！important样式的正确使用。后续将继续蓝桥杯模拟赛的相关训练，争取解决更有挑战性的问题并形成相关博客。

稿件来源：深度学习与文旅应用实验室（DLETA） 

作者：邓雪婷

主编：欧洋