适配不同尺寸的移动端

媒体查询

使用媒体查询分别给不同尺寸手机的根元素（html）设置初始值大小（font-size属性）：

@media screen and (max-width:374px){html{font-size:85.6px}}
@media screen and (min-width:375px) and (max-width:413px){html{font-size:100px}}
@media screen and (min-width:414px) and (max-width:639px){html{font-size:110.7px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:170px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:192px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:200px}}
@media screen and (min-width:800px){html{font-size:213px}}

经过以上设置，页面中的元素大小可以采用rem单位来设置：

line-height: 0.4rem;   /* 即40px*/
font-size: 0.16rem;   /* 即16px*/