响应式设计，动态设置 rem 的 fontsize

---

前言

在前端开发门户网站这种用户范围广、展示终端种类多的情况时，我们会尝试运用到响应式设计。响应式设计通常有css3中的媒体查询、百分比布局和自适应bootstrap等前端响应式框架。没种方式都有它的优劣势，css3中的媒体查询在书写代码方面较为繁琐，bootstrap等前端框架需要引入大量代码而且需要熟悉更多的框架书写规范。
有没有一种偷懒的方式呢？
这也是我在以前开发APP网站时采用的偷懒的方式，现在分享给大家一起讨论。

---

一、设计思路

设计思路很简单，步骤如下：

1. 之前的代码还是正常写。最后将所有写死px像素级的样式修改为rem；
2. 新增以下代码，具体除以多少依照你的项目情况而定。这段代码是根据终端展示窗口宽度来计算一个动态变化的数值，然后赋值给html一个font-size的值。所以就已经实现了响应式的结果，大家可以根据实际情况来觉得这个值的最大值最小值的范围，来让他在电脑和手机上展示时，元素不至于过大或者过小。

二、代码

(function () {
  var baseFontSize = function () {
    var dWidth = document.documentElement.clientWidth/80;
    console.log("fontSize", dWidth + "px");
    if(dWidth<22){ // 最小值
      document.documentElement.style.fontSize = "22px";
    }else if(dWidth>50){ // 最大值
      document.documentElement.style.fontSize = "50px";
    }else{
      document.documentElement.style.fontSize = dWidth + "px";
    }
  };
  window.addEventListener("resize", baseFontSize); // 监听终端视口宽度
  baseFontSize(); // 初始化方法
})();

html {
  font-size: 22px;
}

三、效果图

四、总结

此方法是一个捷径，所以有时候有些布局在响应时不一定会达到绝对完美的效果。但是为了更好的提高用户体验，我们可以结合百分比布局和部分功能的媒体查询来达到更好的效果。条条大路通罗马，方法总比困难多。

五、感谢