手机端页面rem宽度自适应脚本

下面是关于“手机端页面rem宽度自适应脚本”的完整攻略。

什么是rem？

rem是一种可以相对于根元素大小进行调整的单位，它可以用于替代像素作为页面布局的单位。使用rem单位的一个好处是，整个页面的宽度可以根据页面宽度大小进行自动调整，达到适配不同的设备的屏幕。

rem宽度自适应脚本的实现

我们可以通过javascript编写自适应rem脚本，根据设备宽度动态改变html的font-size大小，从而实现自适应。首先，我们可以在head标签里添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript">
    // 获取当前页面宽度并将其存储在变量中
    var pageWidth = document.documentElement.clientWidth;
    // 如果页面宽度大于640，则设置rem大小为100px
    if (pageWidth > 640) {
        document.documentElement.style.fontSize = "100px";
    } 
    // 否则计算rem大小并设置
    else {
        document.documentElement.style.fontSize = 100 * (pageWidth / 640) + 'px';
    }
</script>

上述代码基本实现了rem的自适应，不过在不同的设备上可能会出现问题，需要进一步调整。

常见问题及解决方法

问题1：不同设备上rem不一致

解决方法：

function changeRootFontSize() {
  var BASE_FONT_SIZE = 100;
  var baseWidth = 750;
  var clientWidth = document.documentElement.clientWidth || window.innerWidth;
  var bili = clientWidth/baseWidth;
  var basefontsize = bili*BASE_FONT_SIZE;
  document.documentElement.style.fontSize = basefontsize + 'px';
}
changeRootFontSize();
window.addEventListener("resize",changeRootFontSize,false);

上述代码中的baseWidth表示设计稿的宽度，通过根据设计稿宽度计算出每个设备应该设置的font-size大小。bili则为计算出的比例系数，即当前浏览器宽度与设计稿宽度的比值，用于根据比例计算实际设备需要设置的font-size。

我们同时添加了一个window resize事件监听，用于页面大小发生变化时重新计算font-size大小。

问题2：在新设备上rem发生变化

解决方法：

function changeRootFontSize() {
  var BASE_FONT_SIZE = 100;
  var baseWidth = 750;
  var clientWidth = document.documentElement.clientWidth || window.innerWidth;
  var bili = clientWidth/baseWidth;
  var basefontsize = bili*BASE_FONT_SIZE;
  document.documentElement.style.fontSize = basefontsize + 'px';
}
changeRootFontSize();
window.addEventListener("resize",changeRootFontSize,false);
window.addEventListener("orientationchange",changeRootFontSize,false);

新增了一个window orientationchange事件监听，用于在屏幕旋转时触发重新计算font-size大小。

总结

通过以上展示的几种方法，我们可以实现手机端页面rem宽度自适应脚本。通过添加一些常见问题的解决方案，我们可以让这个脚本更加健壮，更适合实际使用。