vue手机适配媒体查询用法@media

注意:

每个像素阶段都已经上下连接成了，1200px~767px，最高到最低，每个阶段样式字体大小，布局等都可以写在里面,可以按f12，查看各个手机端样式变化~

在index.html页面引入css文件

 <link rel="stylesheet" href="./css/index.css">

在创建一个index.css文件，样式放入里面，自己也可以单独每个阶段分开分别创建个4css文件，全部引入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的话，不会起作用

案例

我这里是：样式写的适配小于750px和大于750px是什么样的
pc是大于750px的，大家可以根据需要去使用

完整版推荐看我另一篇点击下方:
点我跳转

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！