媒体查询不生效问题

1,408 阅读1分钟
  • meta标签需含有如下内容

注:vue框架中,meta标签在根目录下public文件夹中的index.html文件中

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0>
  • and 前后必须要有空格

@media only screen and (max-width: 1200px ) {//对应css样式}
  • 多个媒体查询相互覆盖

例如:

@media only screen and (min-width: 1000px) {body{background:red}}
@media only screen and (min-width: 800px) {body{background:blue}}
//(min-width: 800px)会覆盖掉(min-width: 1000px)的样式,body{background:red}不会生效

解决方案:

当多个媒体查询判断值都采用min-width时,min-width的值 由小到大写
@media only screen and (min-width: 较小值) {body{background:red}}
@media only screen and (min-width: 中) {body{background:yellow}}
@media only screen and (min-width: 较大值) {body{background:blue}}
当多个媒体查询判断值都采用min-width时,min-width的值 由小到大写
@media only screen and (max-width: 较大值) {body{background:red}}
@media only screen and (max-width: 中) {body{background:yellow}}
@media only screen and (max-width: 较小值) {body{background:blue}}
  • css选择器权重问题

    相同容器,根据选择器权重高低,采用权重较高的样式为容器样式

    若选择器权重相同,后写的覆盖先写的

    继承样式权重最低,css属性值后分号前加!import权重最高