<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

// 首先是一个立即执行函数，执行时传入的参数是window和document
(function flexible (window, document) {
 var docEl = document.documentElement // 返回文档的root元素
 var dpr = window.devicePixelRatio || 1 
 // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值

 // 调整body标签的fontSize，fontSize = (12 * dpr) + 'px'
 // 设置默认字体大小，默认的字体大小继承自body
 function setBodyFontSize () {
 if (document.body) {
  document.body.style.fontSize = (12 * dpr) + 'px'
 } else {
  document.addEventListener('DOMContentLoaded', setBodyFontSize)
 }
 }
 setBodyFontSize();

 // set 1rem = viewWidth / 10
 // 设置root元素的fontSize = 其clientWidth / 10 + ‘px'
 function setRemUnit () {
 var rem = docEl.clientWidth / 10
 docEl.style.fontSize = rem + 'px'
 }

 setRemUnit()


 // 当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
 window.addEventListener('resize', setRemUnit)
  // pageshow 是我们重新加载页面触发的事件
 window.addEventListener('pageshow', function(e) {
  // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
  if (e.persisted) {
   setRemUnit()
  }
 })

 // 检测0.5px的支持，支持则root元素的class中有hairlines
 if (dpr >= 2) {
 var fakeBody = document.createElement('body')
 var testElement = document.createElement('div')
 testElement.style.border = '.5px solid transparent'
 fakeBody.appendChild(testElement)
 docEl.appendChild(fakeBody)
 if (testElement.offsetHeight === 1) {
  docEl.classList.add('hairlines')
 }
 docEl.removeChild(fakeBody)
 }
}(window, document))

// 引用地址
<script src="/UploadFiles/2021-04-02/">

下面的这个meta标签 页面不要设定， Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。


// 这个标签不要设定！！！
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> -->


2. 把视觉稿中的px转换成rem
一般UI给我们的稿子大小是750的。就以这个为例子：在flexible.js中，把750px分为10份，1rem 为 75px。所以font-size的基准值为75px；

css换算成rem公式为: px值 / 75 = rem, 例如：100px=100/75=1.33rem

但是这样一来计算起来就非常的复杂。那么我们在日常开发中怎么快速计算呢，这里我说下我常用的编译器VScode 它里面有个插件叫cssrem，用它就可以在我们输入px值后自动转换rem。
安装方法如下：
①：安装插件

②：修改配置参数

当设计图为750时在下图中这里填写75

root font-size (unit: px), default: 16

这代表根字体大小，默认是16px，即1rem = 16px,我们这里把他改为75。

cssrem.fixedDigits px转rem小数点最大长度，默认：6。



③：修改完参数后我们只要输入px值插件就会自动算出rem值，效果如下图：