引言
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务，而 Gup 中文网则是最受用户欢迎的网站，本次试题将实现 Gulp 中文网的页面响应式。
方法
本次实验主要应用了CSS3中的多媒体查询语句（@media），多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
试题中使用到的css属性：
|
！important |
可以覆盖父级的样式,优先显示 |
|
display：none |
表示此元素不会被显示 |
|
position: absolute |
生成绝对定位的元素，相对于定位以外的第一个父元素进行定位 |
实验结果与讨论
- 前期准备工作
-
解压基础代码，并打开环境右侧的【Web 服务】
-
点击F12（F12+Fn）,打开谷歌调试工具
-
如果对@media属性不熟悉，可在教程中学习基础原理
- 考试需求
- 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;
}
}
