手机自适应及媒体查询

2024年3月20日 130次阅读 来源: weixin_43661654

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">
    原文作者：weixin_43661654
    原文地址: https://blog.csdn.net/weixin_43661654/article/details/85134298
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞