web页面适配移动端之rem

适配问题

现在很多页面动不动就要多端适配，开发过程中也很是无奈，但是为了混口饭吃也没有办法，对于移动端适配问题，也算实践了一两次，采用的rem来进行适配（对于vue的uni-app和react的rn的话，就不做讨论了。），本人也是菜鸟一枚，谢谢。

px，em，rem

• px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
• em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
• rem是CSS3新增的一个相对单位，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

使用rem

1. 首先，都知道浏览器的默认字体是16px，所以通常直接设置rem作为单位的话，其实是将字体由原本的大小进行16比例缩放。
2. 其次兼容性上，目前，IE9+，Firefox、Chrome、Safari、Opera的主流版本都支持了rem。大多数情况下不用去考虑浏览器是否兼容的问题。
3. 最简单的方法，不使用插件的情况下，直接创建一个rem.js，然后设置px转换rem就可以了：

;(function (doc, win) {
var docEl = doc.documentElement
var resizeEvt =
    'orientationchange' in window ? 'orientationchange' : 'resize'
var recalc = function () {
  var clientWidth = docEl.clientWidth
  if (!clientWidth) return
  docEl.style.fontSize = 100 * (clientWidth / 1200) + 'px' 
}

if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

这个rem.js可以放在项目的public目录下，然后直接在html中引入即可，<script type="text/javascript" src="./rem.js"></script>，当然这是最简单的方案。
5. 在平常的开发情况下，推荐一个比较好的插件“px2rem”，在vue下直接使用npm i postcss-px2rem --save -dev进行安装就行，然后我们需要在vue.config.js中增加一些配置：

const px2rem = require('postcss-px2rem')

const postcss = px2rem({
 remUnit: 32   //基准大小 baseSize，需要和rem.js中相同
})

module.exports = {
 css: {
   loaderOptions: {
     postcss: {
       plugins: [
         postcss
       ]
     }
   }
 }
}

这里同样要增加一个rem.js：

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem() {
 // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
 setRem()
}

引入这个rem.js就可以了，引入方式可以是在html中直接引入，也可以在main.js中增加以下代码来引入：

;(function(){
var rem = document.createElement('script');
rem.src = './rem.js';
document.body.appendChild(rem)
})()