【踩坑】vue中使用媒体查询方法和不生效问题总结
在vue中是不能直接使用@media的,我们必须结合less或者sass来使用它一、安装依赖项只要你安装了sass就行。npm install sass-loader node-sass --save-dev二、@/assets/scss/media.scss这一步,自己创建一个scss文件,这路径不用跟我一样,自己改就行。@media screen and (min-width:1400px)
·
在vue中是不能直接使用@media的,我们必须结合less或者sass来使用它
一、安装依赖项
只要你安装了sass就行。
npm install sass-loader node-sass --save-dev
二、@/assets/scss/media.scss
这一步,自己创建一个scss文件,这路径不用跟我一样,自己改就行。
@media screen and (min-width:1400px) {
.time_comparison_wrap{
margin-top: 80px;
.wrap_title {
text-align: center;
font-size: 16px;
margin: 10px 0;
font-weight: 700;
}
}
.time_comparison_title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
margin-top: 5;
}
}
三、把scss文件引入到main.js文件内。
import "@/assets/scss/media.scss"
如果以上三部做完测试发现媒体查询不生效,那么基本是以下几种情况,排查一遍错误看看:
错误一:在html结构文件里必须引入代码
<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
width=device-width, initial-scale=1.0 这两个比较重要
width=device-width 是指可视化宽度
initial-scale=1.0 是指缩放比例
错误二:格式书写错误and后面必须有空格例如下面代码
@media screen and (min-width:1400px) {}
错误三:样式冲突;@media查询代码的样式被后面的css所覆盖
错误四:css本身出了问题导致css不生效(若前四项错误都确定不存在,多半问题就出在这)
div{display:flex;}/*那么div所有的display效果都将无法生效*/
例如块元素浮动导致父级元素没有高度;此时给父元素加背景颜色发现没有生效,实际上是css导致的错误,而没有显示。
例如css选择的优先级也会导致对其中一种生效另外一种不生效,等等css错误导致的问题也非常多,就不一 一列举了。
更多推荐
已为社区贡献17条内容
所有评论(0)