引言
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务，而 Gup 中文网则是最受用户欢迎的网站，本次试题将实现 Gulp 中文网的页面响应式。
方法
本次实验主要应用了CSS3中的多媒体查询语句（@media），多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
试题中使用到的css属性：
！important | 可以覆盖父级的样式,优先显示 |
|---|---|
display：none | 表示此元素不会被显示 |
position: absolute | 生成绝对定位的元素，相对于定位以外的第一个父元素进行定位 |
实验结果与讨论
- 前期准备工作
- 解压基础代码，并打开环境右侧的【Web 服务】
- 点击F12（F12 Fn）,打开谷歌调试工具
- 如果对@media属性不熟悉，可在菜鸟教程中学习基础原理 （链接：https://www.runoob.com/css3/css3-mediaqueries.html）
- 考试需求
- 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
代码语言：javascript复制/* 格式需要规范，空格不能少 */
@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%。
代码语言：javascript复制@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;
}
}
- 完整实验代码
@media screen and (max-width:1400px) {
nav .content,
main.clear section,
main.clear ul {
width: 900px !important;
}
}
@media screen and (max-width: 900px) {
nav .content,
main.clear section,
main.clear ul,
main.clear ul li {
width: 700px!important;
}
}
@media screen and (max-width:650px) {
.list{
display: none;
}
footer{
width: 100% !important;
}
nav .content .menu {
display: block;
position: absolute;
top: 13px;
right: 10px;
}
}结语
本次实验解决的问题为Web蓝桥杯线上模拟赛：响应式Gulp中文网,运用技术Css3中的@media（多媒体查询）样式,解决问题时需要重点关注@media的书写格式、css的类选择器名、！important样式的正确使用。后续将继续蓝桥杯模拟赛的相关训练，争取解决更有挑战性的问题并形成相关博客。
稿件来源：深度学习与文旅应用实验室（DLETA）
作者：邓雪婷
主编：欧洋
