返回

深入剖析淘宝网易移动端 px 转换 rem 原理，Vue-cli 实现 px 转换 rem

前端

淘宝方案

原理剖析

淘宝的方案主要是利用了 CSS3 的媒体查询功能。具体做法是创建一个名为 "flexible.js" 的 JavaScript 文件，里面包含了以下代码：

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

这段代码的功能是：

  1. 获取设备的屏幕宽度。
  2. 计算出根元素的 font-size 值，使其与屏幕宽度成正比。
  3. 在设备屏幕宽度发生变化时重新计算根元素的 font-size 值。

实现步骤

在项目中使用淘宝方案实现 px 转换 rem 的步骤如下：

  1. 安装 lib-flexible 库。
npm install lib-flexible --save
  1. 在项目中引入 lib-flexible 库。
import 'lib-flexible';
  1. 在 HTML 文档中添加 viewport meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  1. 在 CSS 代码中使用 rem 单位。

网易方案

原理剖析

网易的方案与淘宝方案类似，也是利用了 CSS3 的媒体查询功能。不同之处在于，网易方案使用的是 postMessage 事件来触发媒体查询。具体做法是创建一个名为 "px2rem.js" 的 JavaScript 文件，里面包含了以下代码：

(function(win, doc) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      var rem = 100 * (clientWidth / 750);
      win.postMessage('px2rem_' + rem, '*');
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(window, document);

window.addEventListener('message', function(e) {
  if (e.origin !== location.origin) return;
  var match = e.data.match(/^px2rem_(\d+)$/);
  if (!match) return;
  var rem = match[1] / 100;
  docEl.style.fontSize = rem + 'px';
});

这段代码的功能是：

  1. 获取设备的屏幕宽度。
  2. 计算出根元素的 font-size 值，使其与屏幕宽度成正比。
  3. 在设备屏幕宽度发生变化时重新计算根元素的 font-size 值。

实现步骤

在项目中使用网易方案实现 px 转换 rem 的步骤如下：

  1. 安装 px2rem-loader 库。
npm install px2rem-loader --save
  1. 在项目中引入 px2rem-loader 库。
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 75
            }
          },
          'css-loader'
        ]
      }
    ]
  }
};
  1. 在 HTML 文档中添加 viewport meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  1. 在 CSS 代码中使用 rem 单位。

Vue-cli 实现 px 转换 rem

在 Vue-cli 项目中实现 px 转换 rem 的步骤如下：

  1. 安装 vue-cli。
npm install -g vue-cli
  1. 创建一个新的 Vue-cli 项目。
vue create my-project
  1. 在项目中安装 px2rem-loader 库。
npm install px2rem-loader --save
  1. 在项目中引入 px2rem-loader 库。
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 75
            }
          },
          'css-loader'
        ]
      }
    ]
  }
};
  1. 在 HTML 文档中添加 viewport meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  1. 在 CSS 代码中使用 rem 单位。

总结

本文介绍了淘宝网易移动端 px 转换 rem 的原理和实现步骤，并提供了使用 Vue-cli 实现 px 转换 rem 的详细步骤。希望对大家有所帮助。