h5轻松实现rem适配

分手后的思念是犯贱 2022-10-12 14:55 158阅读 0赞

### 1. vs Code安装 px to rem & rpx (cssrem) ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70]

### 2. 修改扩展 root font size ###

> 我这里是按照 设计稿 750px  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70 1]

### 3. 添加 rem.js ###

(function flexible (window, document) { 
      var docEl = document.documentElement
      // 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。
      var dpr = window.devicePixelRatio || 1
    
      // 调整文字大小
      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)
      // 当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件
      // (这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)
      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))

### 4. 愉快的使用 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70]: /images/20221005/7ce214cae69d451e85c2b61c1b44b3f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/dd2067682b9e4c45846b8855e13ae926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/ad0570c260fe4cfbb86383d392bfc4f0.png