5. 移动端适配rem方案

1. rem+动态html的font-size

1. rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。
2. 比如如下案例：
   1.设置一个盒子的宽度是2rem；
   2.设置不同的屏幕上html的font-size不同；

image.png

3. 这样在开发中，我们只需要考虑两个问题：
   问题一：针对不同的屏幕，设置html不同的font-size；
   问题二：将原来要设置的尺寸，转化成rem单位；

2. rem的font-size尺寸

2.1 方案一：媒体查询

1. 可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸；
2. 缺点：
   1.我们需要针对不同的屏幕编写大量的媒体查询；
   2.如果动态改变尺寸，不会实时的进行更新；(媒体查询只能修改某个范围区间里面的html的字体大小，在这个区间里面，盒子大小都是一样的，我们是希望实时改变的)

2.2 方案二：编写js代码

1. 如果希望实时改变屏幕尺寸时，font-size也可以实时更改，可以通过js代码；
2. 方法：
   1.根据html的宽度计算出font-size的大小，并且设置到html上；
   2.监听页面的实时改变，并且重新设置font-size的大小到html上；

  
  
  
  

  

  


  
  


  

  
我是文本

  
  哈哈哈哈哈哈

js

// 1.获取html的元素
const htmlEl = document.documentElement;

function setRemUnit() {
  // 2.获取html的宽度(视口的宽度)
  const htmlWidth = htmlEl.clientWidth;
  // 3.根据宽度计算一个html的font-size的大小
  const htmlFontSize = htmlWidth / 10;
  // 4.将font-size设置到html上
  htmlEl.style.fontSize = htmlFontSize + "px";
}
// 保证第一次进来时, 可以设置一次font-size
setRemUnit();

// 当屏幕尺寸发生变化时, 实时来修改html的font-size
window.addEventListener("resize", setRemUnit);

2.3 方案三：lib-flexible库

事实上，lib-flexible库做的事情是相同的，你也可以直接引入它；

  
  
  
  

  

  


  
  


  

  
我是文本

lib_flexible.js

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  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))

3. rem的单位换算

3.1 方案一：手动换算

1. 比如有一个在375px屏幕上，100px宽度和高度的盒子；
2. 我们需要将100px转成对应的rem值；
3. 100/37.5=2.6667，其他也是相同的方法计算即可；

3.2 方案二：less/scss函数

3.3 方案三：postcss-pxtorem

3.4 方案四：VSCode插件

px to rem 的插件，在编写时自动转化