Abstract

电脑和手机的排版肯定是不一样的, 电脑上200px的margin都嫌小, 但在移动端可能就把大半个屏幕都占了. 所以就剽窃了一些可以依照分辨率实现不同样式的方法.

rem 是 CSS 中的一种单位，代表“根元素的字体大小”（root em）。它是相对于文档根元素（通常是 <html> 标签）的字体大小来计算的。使用 rem 单位可以帮助实现响应式设计，使得布局和字体大小更易于管理和调整。

rem 是 CSS3 新增的一个相对单位（root em，根 em）
只根据当前页面 HTML 页面的 font-size 设置，如果根目录的 font-size 为 18px，则 1rem = 18px

因此我们可以使用 rem 单位来实现响应式布局。动态设置 html 的 font-size 大小，来实现响应式布局。

注意! IE浏览器不支持 rem

Content

媒体查询

媒体查询就是查看当前设备的分辨率, 然后依照分辨率使用不同的CSS样式.

在不同的屏幕尺寸（Viewport Size）下，设置不同的 font-size 大小。

@media screen and (min-width: 320px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 37.5px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 41.4px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 75px;
  }
}

动态修改

我们可以通过 js 动态修改 html 的 font-size 大小，来实现响应式布局。

<script>
  // 根据屏幕尺寸大小调整html的fontsize
  function setHtmlFontSize() {
    const width = document.documentElement.clientWidth;
    // 把宽度除以10，得到rem的大小，平分为十份
    document.documentElement.style.fontSize = width / 10 + "px";
  }
  //   初始化
  setHtmlFontSize();
  //   监听屏幕尺寸变化事件
  window.addEventListener("resize", setHtmlFontSize);
  //   监听屏幕翻转事件
  window.addEventListener("orientationchange", setHtmlFontSize);
</script>

封装插件使用。

(function(global) {
    // 创建一个 FontSizeAdjuster 构造函数
    function FontSizeAdjuster(options) {
        this.defaultSize = options.defaultSize || 16; // 默认字体大小
        this.designWidth = options.designWidth || 375; // 设计宽度
        this.resize(); // 初始化时设置字体大小
        this.bindEvents(); // 绑定窗口 resize 事件
    }

    // 设置字体大小的方法
    FontSizeAdjuster.prototype.resize = function() {
        var width = window.innerWidth; // 获取窗口宽度
        var fontSize = this.defaultSize * (width / this.designWidth); // 根据宽度线性缩放
        // 设置根元素的字体大小
        document.documentElement.style.fontSize = fontSize + 'px';
    };

    // 绑定窗口 resize 事件
    FontSizeAdjuster.prototype.bindEvents = function() {
        var self = this;
        window.addEventListener('resize', function() {
            self.resize();
        });
    };

    // 将插件暴露给全局
    global.FontSizeAdjuster = FontSizeAdjuster;

})(window);


// 使用插件
var fontSizeAdjuster = new FontSizeAdjuster({
    defaultSize: 16, // 默认字体大小
    designWidth: 375 // 设计宽度
});

注意事项

在设置盒子的宽度时，我们推荐使用百分比单位，这样可以保证在不同屏幕尺寸下，盒子的宽度占比保持一致。
需要注意的是，我们在使用百分比%宽度的盒子布局时，需要注意在不同屏幕尺寸下，盒子里的内容是否会溢出或者换行。

插件推荐

Flexible.js：是一个流行的 JavaScript 插件，旨在根据设备宽度动态设置根元素的字体大小。
postcss-pxtorem：这个插件可以将 px 单位自动转换为 rem 单位。在构建过程中使用它，方便地将设计稿中的像素值转换为 rem。