【移动端适配方案一 弹性布局】@media标签

@media screen and (min-width : 320px) {
    html {
        font-size : 10px !important;
    }
}
@media screen and (min-width : 323.2px) {
    html {
        font-size : 10.1px !important;
    }
}
@media screen and (min-width : 326.4px) {
    html {
        font-size : 10.2px !important;
    }
}
@media screen and (min-width : 329.6px) {
    html {
        font-size : 10.3px !important;
    }
}
@media screen and (min-width : 332.8px) {
    html {
        font-size : 10.4px !important;
    }
}
@media screen and (min-width : 336px) {
    html {
        font-size : 10.5px !important;
    }
}
@media screen and (min-width : 339.2px) {
    html {
        font-size : 10.6px !important;
    }
}
@media screen and (min-width : 342.4px) {
    html {
        font-size : 10.7px !important;
    }
}
@media screen and (min-width : 345.6px) {
    html {
        font-size : 10.8px !important;
    }
}
@media screen and (min-width : 348.8px) {
    html {
        font-size : 10.9px !important;
    }
}
@media screen and (min-width : 352px) {
    html {
        font-size : 11px !important;
    }
}
@media screen and (min-width : 355.2px) {
    html {
        font-size : 11.1px !important;
    }
}
@media screen and (min-width : 358.4px) {
    html {
        font-size : 11.2px !important;
    }
}
@media screen and (min-width : 361.6px) {
    html {
        font-size : 11.3px !important;
    }
}
@media screen and (min-width : 364.8px) {
    html {
        font-size : 11.4px !important;
    }
}
@media screen and (min-width : 368px) {
    html {
        font-size : 11.5px !important;
    }
}
@media screen and (min-width : 371.2px) {
    html {
        font-size : 11.6px !important;
    }
}
@media screen and (min-width : 374.4px) {
    html {
        font-size : 11.7px !important;
    }
}
@media screen and (min-width : 377.6px) {
    html {
        font-size : 11.8px !important;
    }
}
@media screen and (min-width : 380.8px) {
    html {
        font-size : 11.9px !important;
    }
}
@media screen and (min-width : 384px) {
    html {
        font-size : 12px !important;
    }
}
@media screen and (min-width : 387.2px) {
    html {
        font-size : 12.1px !important;
    }
}
@media screen and (min-width : 390.4px) {
    html {
        font-size : 12.2px !important;
    }
}
@media screen and (min-width : 393.6px) {
    html {
        font-size : 12.3px !important;
    }
}
@media screen and (min-width : 396.8px) {
    html {
        font-size : 12.4px !important;
    }
}
@media screen and (min-width : 400px) {
    html {
        font-size : 12.5px !important;
    }
}
@media screen and (min-width : 403.2px) {
    html {
        font-size : 12.6px !important;
    }
}
@media screen and (min-width : 406.4px) {
    html {
        font-size : 12.7px !important;
    }
}
@media screen and (min-width : 409.6px) {
    html {
        font-size : 12.8px !important;
    }
}
@media screen and (min-width : 412.8px) {
    html {
        font-size : 12.9px !important;
    }
}
@media screen and (min-width : 416px) {
    html {
        font-size : 13px !important;
    }
}
@media screen and (min-width : 419.2px) {
    html {
        font-size : 13.1px !important;
    }
}
@media screen and (min-width : 422.4px) {
    html {
        font-size : 13.2px !important;
    }
}
@media screen and (min-width : 425.6px) {
    html {
        font-size : 13.3px !important;
    }
}
@media screen and (min-width : 428.8px) {
    html {
        font-size : 13.4px !important;
    }
}
@media screen and (min-width : 432px) {
    html {
        font-size : 13.5px !important;
    }
}
@media screen and (min-width : 435.2px) {
    html {
        font-size : 13.6px !important;
    }
}
@media screen and (min-width : 438.4px) {
    html {
        font-size : 13.7px !important;
    }
}
@media screen and (min-width : 441.6px) {
    html {
        font-size : 13.8px !important;
    }
}
@media screen and (min-width : 444.8px) {
    html {
        font-size : 13.9px !important;
    }
}
@media screen and (min-width : 448px) {
    html {
        font-size : 14px !important;
    }
}
@media screen and (min-width : 451.2px) {
    html {
        font-size : 14.1px !important;
    }
}
@media screen and (min-width : 454.4px) {
    html {
        font-size : 14.2px !important;
    }
}
@media screen and (min-width : 457.6px) {
    html {
        font-size : 14.3px !important;
    }
}
@media screen and (min-width : 460.8px) {
    html {
        font-size : 14.4px !important;
    }
}
@media screen and (min-width : 464px) {
    html {
        font-size : 14.5px !important;
    }
}
@media screen and (min-width : 467.2px) {
    html {
        font-size : 14.6px !important;
    }
}
@media screen and (min-width : 470.4px) {
    html {
        font-size : 14.7px !important;
    }
}
@media screen and (min-width : 473.6px) {
    html {
        font-size : 14.8px !important;
    }
}
@media screen and (min-width : 476.8px) {
    html {
        font-size : 14.9px !important;
    }
}
@media screen and (min-width : 480px) {
    html {
        font-size : 15px !important;
    }
}
@media screen and (min-width : 483.2px) {
    html {
        font-size : 15.1px !important;
    }
}
@media screen and (min-width : 486.4px) {
    html {
        font-size : 15.2px !important;
    }
}
@media screen and (min-width : 489.6px) {
    html {
        font-size : 15.3px !important;
    }
}
@media screen and (min-width : 492.8px) {
    html {
        font-size : 15.4px !important;
    }
}
@media screen and (min-width : 496px) {
    html {
        font-size : 15.5px !important;
    }
}
@media screen and (min-width : 499.2px) {
    html {
        font-size : 15.6px !important;
    }
}
@media screen and (min-width : 502.4px) {
    html {
        font-size : 15.7px !important;
    }
}
@media screen and (min-width : 505.6px) {
    html {
        font-size : 15.8px !important;
    }
}
@media screen and (min-width : 508.8px) {
    html {
        font-size : 15.9px !important;
    }
}
@media screen and (min-width : 512px) {
    html {
        font-size : 16px !important;
    }
}
@media screen and (min-width : 515.2px) {
    html {
        font-size : 16.1px !important;
    }
}
@media screen and (min-width : 518.4px) {
    html {
        font-size : 16.2px !important;
    }
}
@media screen and (min-width : 521.6px) {
    html {
        font-size : 16.3px !important;
    }
}
@media screen and (min-width : 524.8px) {
    html {
        font-size : 16.4px !important;
    }
}
@media screen and (min-width : 528px) {
    html {
        font-size : 16.5px !important;
    }
}
@media screen and (min-width : 531.2px) {
    html {
        font-size : 16.6px !important;
    }
}
@media screen and (min-width : 534.4px) {
    html {
        font-size : 16.7px !important;
    }
}
@media screen and (min-width : 537.6px) {
    html {
        font-size : 16.8px !important;
    }
}
@media screen and (min-width : 540.8px) {
    html {
        font-size : 16.9px !important;
    }
}
@media screen and (min-width : 544px) {
    html {
        font-size : 17px !important;
    }
}
@media screen and (min-width : 547.2px) {
    html {
        font-size : 17.1px !important;
    }
}
@media screen and (min-width : 550.4px) {
    html {
        font-size : 17.2px !important;
    }
}
@media screen and (min-width : 553.6px) {
    html {
        font-size : 17.3px !important;
    }
}
@media screen and (min-width : 556.8px) {
    html {
        font-size : 17.4px !important;
    }
}
@media screen and (min-width : 560px) {
    html {
        font-size : 17.5px !important;
    }
}
@media screen and (min-width : 563.2px) {
    html {
        font-size : 17.6px !important;
    }
}
@media screen and (min-width : 566.4px) {
    html {
        font-size : 17.7px !important;
    }
}
@media screen and (min-width : 569.6px) {
    html {
        font-size : 17.8px !important;
    }
}
@media screen and (min-width : 572.8px) {
    html {
        font-size : 17.9px !important;
    }
}
@media screen and (min-width : 576px) {
    html {
        font-size : 18px !important;
    }
}
@media screen and (min-width : 579.2px) {
    html {
        font-size : 18.1px !important;
    }
}
@media screen and (min-width : 582.4px) {
    html {
        font-size : 18.2px !important;
    }
}
@media screen and (min-width : 585.6px) {
    html {
        font-size : 18.3px !important;
    }
}
@media screen and (min-width : 588.8px) {
    html {
        font-size : 18.4px !important;
    }
}
@media screen and (min-width : 592px) {
    html {
        font-size : 18.5px !important;
    }
}
@media screen and (min-width : 595.2px) {
    html {
        font-size : 18.6px !important;
    }
}
@media screen and (min-width : 598.4px) {
    html {
        font-size : 18.7px !important;
    }
}
@media screen and (min-width : 601.6px) {
    html {
        font-size : 18.8px !important;
    }
}
@media screen and (min-width : 604.8px) {
    html {
        font-size : 18.9px !important;
    }
}
@media screen and (min-width : 608px) {
    html {
        font-size : 19px !important;
    }
}
@media screen and (min-width : 611.2px) {
    html {
        font-size : 19.1px !important;
    }
}
@media screen and (min-width : 614.4px) {
    html {
        font-size : 19.2px !important;
    }
}
@media screen and (min-width : 617.6px) {
    html {
        font-size : 19.3px !important;
    }
}
@media screen and (min-width : 620.8px) {
    html {
        font-size : 19.4px !important;
    }
}
@media screen and (min-width : 624px) {
    html {
        font-size : 19.5px !important;
    }
}
@media screen and (min-width : 627.2px) {
    html {
        font-size : 19.6px !important;
    }
}
@media screen and (min-width : 630.4px) {
    html {
        font-size : 19.7px !important;
    }
}
@media screen and (min-width : 633.6px) {
    html {
        font-size : 19.8px !important;
    }
}
@media screen and (min-width : 636.8px) {
    html {
        font-size : 19.9px !important;
    }
}
@media screen and (min-width : 640px) {
    html {
        font-size : 20px !important;
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值