媒体查询

Posted 2021-03-19 su-feng-address

 媒体查询代码，一般是表示只有在屏幕尺寸小于或大于某某像素才应用某一样式

例如：

<meta name="viewport" content="width=device-width, initial-scale=1"/>

 

@media only screen and (max-width:639px)...

 

手机端的代码一般把宽度写成百分比，图片的宽度写成百分比会根据屏幕自动缩放，写成一个最大值就可以。

@media only screen and (min-width: 1080px) and (max-width: 1300px) {
    html {
        font-size: 8.32px;
    }
}

@media only screen and (min-width: 1300px) and (max-width: 1580px) {
    html {
        font-size: 11.38px;
    }
}

@media only screen and (min-width: 1580px) and (max-width: 1900px) {
    html {
        font-size: 13.29px;
    }
}

@media only screen and (min-width: 1900px) and (max-width: 2560px) {
    html {
        font-size: 16px;
    }
}