移动端适配方案介绍及推荐：从px到rem的转变

当今移动设备的普及，使得移动端的适配成为了前端开发中一个重要的问题。移动端的适配就是根据不同设备的屏幕尺寸和像素密度，使得网页在不同设备上能够以最佳的效果展现。

下面我们来简单的介绍三种较常见的适配方案。

像素(px)单位结合媒体查询

这种方案通过编写多个媒体查询来适配不同的设备。例如，可以在CSS中设置一个初始样式，然后在媒体查询中根据设备的宽度或高度来调整样式。

<style lang="less" >
.test {
  width: 100px;
  height: 100px;
  background: #000;
}
@media (min-width: 400px) {
  .test {
    width: 120px;
    height: 120px;
    background: #000;
  }
}
</style>

这种方案的缺点是需要编写大量的媒体查询，对于复杂的布局可能会变得繁琐。

相对单位rem结合媒体查询

类似于第一种方案，但是使用rem单位来进行布局。rem单位是相对于根元素（html）的字体大小而言的。通过设置根元素的字体大小，并在媒体查询中调整根元素的字体大小，从而实现不同设备上的适配。

<style lang="less" >
html {
  font-size: 20px;
}
.test {
  width: 5rem;
  height: 5rem;
  background: #000;
}
@media (min-width: 400px) {
  html {
    font-size: 25px;
  }
}
</style>

这种方案相比于第一种方案，减少了编写媒体查询的工作量，但仍然需要编写多份媒体查询。

rem单位结合flexible.js库

这种方案通过使用flexible.js动态设置根元素的字体大小，然后使用rem单位进行布局。flexible.js会根据设备的宽度动态计算根元素的字体大小，从而实现页面的自适应。

<script>
(function(doc, win) {
    // 用js动态修改页面根字体大小
    var docEl = doc.documentElement
    var recalc = function() {
        var clientWidth = docEl.clientWidth
        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
    }
    doc.addEventListener('DOMContentLoaded', recalc)
    // 监听window窗口大小发生变更
    win.addEventListener('resize', recalc)
})(document, window)
</script>
<style lang="less" >
.test {
  width: 5rem;
  height: 5rem;
  background: #000;
}
</style>

这种方案相比前两种方案，更加简单快捷，并且兼容性较好。但需要注意的是，flexible.js只能解决布局的问题，对于其他一些移动端适配的问题，如图片适配等，仍然需要额外处理。

总的来说，在移动端适配中，使用rem单位结合flexible.js库是较为推荐的方案，可以实现简单、快捷和兼容性较好的移动端适配。