移动端媒体查询的设置(less的写法)

@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;
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值