媒体查询
使用媒体查询分别给不同尺寸手机的根元素(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*/