媒体查询加上rem实现页面字体大小自适应
实现
以375px大小为基准把根字体设为16px
通过媒体查询适配不同屏幕大小，加上计算属性和rem实现字体大小自适应
代码
下面是一套在实际开发中，兼容性较好的实践代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><style>html {font-size: 16px;}@media screen and (min-width: 375px) {html {/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */font-size: calc(100% + 2 * (100vw - 375px) / 39);font-size: calc(16px + 2 * (100vw - 375px) / 39);}}@media screen and (min-width: 414px) {html {/* 414px-1000px每100像素宽字体增加1px(18px-22px) */font-size: calc(112.5% + 4 * (100vw - 414px) / 586);font-size: calc(18px + 4 * (100vw - 414px) / 586);}}@media screen and (min-width: 600px) {html {/* 600px-1000px每100像素宽字体增加1px(20px-24px) */font-size: calc(125% + 4 * (100vw - 600px) / 400);font-size: calc(20px + 4 * (100vw - 600px) / 400);}}@media screen and (min-width: 1000px) {html {/* 1000px往后是每100像素0.5px增加 */font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);font-size: calc(22px + 6 * (100vw - 1000px) / 1000);}}</style><body><div style="font-size: 1.0rem;">我是16px</div><div style="font-size: 1.125rem;">我是18px</div></body></html>
