Web前端之响应式 Gulp 中文网
引言
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/* 格式需要规范，空格不能少 */
@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;
}
}完整实验代码
| @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）
主编：欧洋