字体自适应缩放，其实也不是什么难技术可以用JS控制也可以用css的@media根据屏幕宽度判断，缩放的比例。问题是屏幕要多宽字体缩放到什么比例才能符合大众这才是问题。
不说了直接放出代码：
@media (min-width: 1700px) { html { font-size: 188%; } }
@media (max-width: 1700px) { html { font-size: 188%; } }
@media (max-width: 1680px) { html { font-size: 186%; } }
@media (max-width: 1660px) { html { font-size: 184%; } }
@media (max-width: 1640px) { html { font-size: 182%; } }
@media (max-width: 1620px) { html { font-size: 180%; } }
@media (max-width: 1600px) { html { font-size: 178%; } }
@media (max-width: 1580px) { html { font-size: 176%; } }
@media (max-width: 1560px) { html { font-size: 174%; } }
@media (max-width: 1540px) { html { font-size: 172%; } }
@media (max-width: 1520px) { html { font-size: 170%; } }
@media (max-width: 1500px) { html { font-size: 168%; } }
@media (max-width: 1480px) { html { font-size: 166%; } }
@media (max-width: 1460px) { html { font-size: 164%; } }
@media (max-width: 1440px) { html { font-size: 162%; } }
@media (max-width: 1420px) { html { font-size: 160%; } }
@media (max-width: 1400px) { html { font-size: 158%; } }
@media (max-width: 1380px) { html { font-size: 156%; } }
@media (max-width: 1360px) { html { font-size: 154%; } }
@media (max-width: 1340px) { html { font-size: 152%; } }
@media (max-width: 1320px) { html { font-size: 150%; } }
@media (max-width: 1300px) { html { font-size: 148%; } }
@media (max-width: 1280px) { html { font-size: 146%; } }
@media (max-width: 1260px) { html { font-size: 144%; } }
@media (max-width: 1240px) { html { font-size: 142%; } }
@media (max-width: 1220px) { html { font-size: 140%; } }
@media (max-width: 1200px) { html { font-size: 138%; } }
@media (max-width: 1180px) { html { font-size: 136%; } }
@media (max-width: 1160px) { html { font-size: 134%; } }
@media (max-width: 1140px) { html { font-size: 132%; } }
@media (max-width: 1120px) { html { font-size: 130%; } }
@media (max-width: 1100px) { html { font-size: 128%; } }
@media (max-width: 1080px) { html { font-size: 126%; } }
@media (max-width: 1060px) { html { font-size: 124%; } }
@media (max-width: 1040px) { html { font-size: 122%; } }
@media (max-width: 1020px) { html { font-size: 120%; } }
@media (max-width: 1000px) { html { font-size: 118%; } }
@media (max-width: 980px) { html { font-size: 116%; } }
@media (max-width: 960px) { html { font-size: 114%; } }
@media (max-width: 940px) { html { font-size: 112%; } }
@media (max-width: 920px) { html { font-size: 110%; } }
@media (max-width: 900px) { html { font-size: 108%; } }
@media (max-width: 880px) { html { font-size: 106%; } }
@media (max-width: 860px) { html { font-size: 104%; } }
@media (max-width: 840px) { html { font-size: 102%; } }
@media (max-width: 820px) { html { font-size: 100%; } }
@media (max-width: 800px) { html { font-size: 98%; } }
@media (max-width: 780px) { html { font-size: 96%; } }
@media (max-width: 760px) { html { font-size: 94%; } }
@media (max-width: 740px) { html { font-size: 92%; } }
@media (max-width: 720px) { html { font-size: 90%; } }
@media (max-width: 700px) { html { font-size: 88%; } }
@media (max-width: 680px) { html { font-size: 86%; } }
@media (max-width: 660px) { html { font-size: 84%; } }
@media (max-width: 640px) { html { font-size: 82%; } }
@media (max-width: 620px) { html { font-size: 80%; } }
@media (max-width: 600px) { html { font-size: 78%; } }
@media (max-width: 580px) { html { font-size: 76%; } }
@media (max-width: 560px) { html { font-size: 74%; } }
@media (max-width: 540px) { html { font-size: 72%; } }
@media (max-width: 520px) { html { font-size: 70%; } }
@media (max-width: 500px) { html { font-size: 68%; } }
@media (max-width: 480px) { html { font-size: 66%; } }
@media (max-width: 460px) { html { font-size: 64%; } }
@media (max-width: 440px) { html { font-size: 62%; } }
@media (max-width: 420px) { html { font-size: 60%; } }
@media (max-width: 400px) { html { font-size: 58%; } }
@media (max-width: 380px) { html { font-size: 56%; } }
@media (max-width: 360px) { html { font-size: 54%; } }
@media (max-width: 340px) { html { font-size: 52%; } }
@media (max-width: 320px) { html { font-size: 50%; } }