-
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权重最高