1.name=”viewport” 指视口
2. content=”width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=no
注释:width=device-width,宽度为视口的宽度
initial-scale=1.0,屏幕分辨率大小
maximum-scale=3.0, 最大比例
minimum-scale=1.0,最小比例
user-scalable=no,禁止用户缩放
3.媒体查询注意 :主样式在前 ,媒体查询在后。
4.写法: 由大-小 或由小-大
例如:
@media all and (min-width: 768px) and (max-width: 1024px) {
.block{
width: 680px;
background-color: yellow;
}
}
@media all and (min-width: 1024px) and (max-width: 1380px) {
.block{
width: 1024px;
background-color: blue;
}
}
@media all and (min-width: 1580px) {
.block{
width: 1190px;
background-color: red;
}
}
5.强制性兼容的写法:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">