移动端媒体查询的设置（less的写法）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43414945/article/details/90344015

@media only screen and (max-width:1920px),
only screen and (max-device-width:1920px) {

    html,
    body {
        font-size: 117.1875px;
        max-width: 750px;
    }
}

@media only screen and (max-width:1366px),
only screen and (max-device-width:1366px) {

    html,
    body {
        font-size: 117.1875px;
        max-width: 750px;
    }
}

// iPad
@media only screen and (max-width:1024px),
only screen and (max-device-width:1024px) {

    html,
    body {
        font-size: 117.1875px;
        max-width: 750px;
    }
}

@media only screen and (max-width:768px),
only screen and (max-device-width:768px) {

    html,
    body {
        font-size: 117.1875px;
        max-width: 750px;
    }
}

// 移动端手机

@media only screen and (max-width:750px),
only screen and (max-device-width:750px) {

    html,
    body {
        font-size: 117.1875px;
    }
}

@media only screen and (max-width:720px),
only screen and (max-device-width:720px) {

    html,
    body {
        font-size: 112.5px;
    }
}

@media only screen and (max-width:640px),
only screen and (max-device-width:640px) {

    html,
    body {
        font-size: 100px;
    }
}

@media only screen and (max-width:600px),
only screen and (max-device-width:600px) {

    html,
    body {
        font-size: 93.75px;
    }
}

@media only screen and (max-width:540px),
only screen and (max-device-width:540px) {

    html,
    body {
        font-size: 84.375px;
    }
}

@media only screen and (max-width:480px),
only screen and (max-device-width:480px) {

    html,
    body {
        font-size: 75px;
    }
}

@media only screen and (max-width:414px),
only screen and (max-device-width:414px) {

    html,
    body {
        font-size: 64.6875px;
    }
}

@media only screen and (max-width:400px),
only screen and (max-device-width:400px) {

    html,
    body {
        font-size: 62.5px;
    }
}

@media only screen and (max-width:375px),
only screen and (max-device-width:375px) {

    html,
    body {
        font-size: 58.59375px;
    }
}

@media only screen and (max-width:360px),
only screen and (max-device-width:360px) {

    html,
    body {
        font-size: 56.25px;
    }
}

@media only screen and (max-width:320px),
only screen and (max-device-width:320px) {

    html,
    body {
        font-size: 50px;
    }
}

@media only screen and (max-width:240px),
only screen and (max-device-width:240px) {

    html,
    body {
        font-size: 37.5px;
    }
}