移动端适配rem

1、非插件

原理：动他计算屏幕宽度从而动态得到font-size的值，用来适配各类手机屏幕

根元素(html)的：font-size =（屏幕宽度/设计图宽度）* 100  乘100为了防止字体过小

如果设计图上div尺寸为750px 则 为750/100 = 7.5rem

动态写法 calc(100vw / 设计图 / 100)

例如：640屏幕。 设计稿为750px则：1rem为  (640/750) * 100 =  85px

则 75px = 0.75rem

以后按照设计稿像素/100 就为rem值了

拿vue举例，根元素配置如下

<style lang="less">
html {
  font-size: calc(100vw / 7.5);//7.5为设计图宽度/100
  -webkit-text-size-adjust: 100%;
}
</style>

2、flexible.js

原理。不管任何大小屏幕。固定被划分为10分，如果设计搞是750px，则1rem = 75px；而且我们只需要输入px，会自动帮我们计算出rem

综上，个人喜欢第一种手动适配