注意:
每个像素阶段都已经上下连接成了,1200px~767px,最高到最低,每个阶段样式字体大小,布局等都可以写在里面,可以按f12,查看各个手机端样式变化~
在index.html页面引入css文件
<link rel="stylesheet" href="./css/index.css">
在创建一个index.css文件,样式放入里面,自己也可以单独每个阶段分开分别创建个
4
css文件,全部引入index.css文件里面
@media (min-width:1200px) {
.box .nav {
font-size: 18px !important;
color:red !important;
}
.bottomBar {
display: none !important;
}
}
@media only screen and (max-width: 1199px) and (min-width: 992px) {
.box .nav {
font-size: 20px !important;
color:pink !important;
}
.bottomBar {
display: none !important;
}
}
@media only screen and (max-width: 992px) and (min-width: 767px) {
.box .nav {
font-size: 25px !important;
display: none !important;
color:#ccc !important;
}
}
@media only screen and (max-width: 767px) {
.box .nav {
font-size: 30px !important;
display: none !important;
color:blue !important;
}
}
还有一个需要注意的地方就是display: none !important; 每个样式后面都必须要加!import 这个是为了增加样式权重,覆盖index.html里面的初始设置样式,不加!import的话,不会起作用
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!