手机端等比缩放的单位处理

此处是用rem单位实现，根据不同宽度设置不同的基础字体大小。 

以设计图基于750px设计为例：

html {font-size:100px}
@media screen and (max-width:750px) {html {font-size:100px}}
@media screen and (max-width:700px) {html {font-size: 93.33px;}}
@media screen and (max-width:640px) {html {font-size: 85.33px;}}
@media screen and (max-width:590px) {html {font-size: 78.66px;}}
@media screen and (max-width:540px) {html {font-size: 72px;}}
@media screen and (max-width:480px) {html {font-size: 64px;}}
@media screen and (max-width:410px) {html {font-size: 54.66px;}}
@media screen and (max-width:375px) {html {font-size: 50px;}}
@media screen and (max-width:320px) {html {font-size: 42.66px;}}

算法：

设计图宽度和基础字体的比例来算其他宽度的字体大小。

如：

我的设计图宽度是750px，设置的字体是100px，那么比例就是750/100=7.5，这个比例；

计算700px的宽度就用700除以7.5得93.33333；

以此类推。

 

用法：

设计图750px下，字体默认设置的100px，那么0.1rem就是10px。

宽度高度都是可以通过这个基础来设置rem单位的。

例如：

.box{
    font-size:0.28rem;//750宽度下是28px，375宽度下是14px
    height:2rem;//750宽度下是200px,375宽度下是100px
}