webpack的移动端适配方案小结

了解了Vue/React之后，我们都知道构建工具Webpack，它能够打包、压缩和优化资源，并且通过其插件系统可以支持许多功能。其中之一就是移动端适配方案。在这篇文章中，我们将探讨如何实现Webpack的移动端适配方案。

首先，什么是移动端适配？

移动端的屏幕、设备尺寸、分辨率、浏览器版本等诸多因素会导致 Web 应用的展示效果受到较大影响。其中尺寸和分辨率最为关键，想要在不同设备上达到一致的展示效果就需要进行移动端适配。

为什么需要移动端适配？

因为不同设备的分辨率、屏幕大小以及浏览器兼容性等问题需要进行移动端适配来解决，否则会导致页面错位、字体变小或变大、输入框无法正常使用等问题，严重影响用户体验。

移动端适配的主要方法

像素单位（px）的使用

在设计 Web 页面时，我们经常使用像素这个单位，但是像素在不同的设备上所代表的大小是不同的。

Viewport

Viewport 是用户网页的可见区域。不同的设备的 Viewport 大小是不同的，以一个普遍的尺寸为例，移动设备上的 Viewport 尺寸一般为 320px × 568px。

响应式布局

响应式布局是一种流式布局的变体，它可以根据用户设备的屏幕大小和分辨率，自适应地展示页面。

媒体查询

媒体查询是一个可以用来检测设备特性和环境的 CSS 语句块，可以根据不同的屏幕尺寸，应用不同的样式。

实现移动端适配

使用rem作为单位

rem是一种相对单位，与根元素（通常是 元素）相关联。在不同分辨率下，rem单位所代表的大小是不同的。

使用rem的方案有两种：

方案一：手写vw+rem方案

手动来写vw单位作为基准，然后使用sass\less等预处理 CSS 工具中提供的函数将设计稿的px或rem尺寸转换成rem。

例如：

@media screen and (max-width: 1024px) {
  html {
    /* 设置1rem = 100px */
    font-size: 100px;
  }
}
@media screen and (max-width: 750px) {
  html {
    /* 设置1rem = 75px */
    font-size: 75px;
  }
}

方案二：使用webpack自带插件实现

我们可以使用PostCSS工具解析CSS文件，并且通过postcss-px2rem插件将CSS中的px单位转化为rem单位，然后通过html-webpack-plugin插件生成HTML文件并插入meta标签，以此来设置rem单位基准值。

使用过程中需要注意：

1. postcss-px2rem插件默认1rem=16px，可以通过配置修改其转换比例。
2. viewport的meta标签需要在index.html文件中手写，然后通过html-webpack-plugin插件自动注入到生成的HTML文件中。

例如：

const px2rem = require('postcss-px2rem');
const htmlwp = require('html-webpack-plugin');
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            plugins: [
              px2rem({
                // 将1rem转化为100px，（默认为16px）
                remUnit: 100
              })
            ]
          }
        }]
      }
    ]
  },
  plugins: [
    new htmlwp({
      template: 'index.html',
      meta: {
        // 设置viewport，让页面在移动端展示的效果更佳
        viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
      },
      inject: true
    })
  ]
}

使用vw作为单位

使用vw（Viewport width 单位）作为单位可以帮助解决移动端适配问题，因为它是根据Viewport宽度来设置长度的，所以在不同宽度的屏幕上，它所代表的长度也不同。

需要注意的是，使用vw的方案和使用rem的方案是不同的，因为rem是根据根元素的font-size来确定长度的。

例如：

.box {
  width: 30vw;
  height: 50vw;
  border-radius: 4vw;
  font-size: 3.5vw;
}

总结

通过本文我们可以了解到移动端适配的主要方法，以及使用rem或vw作为单位来实现适配的两种方案。对于使用Webpack的开发者来说，可以通过安装postcss-px2rem等插件，将CSS中的px单位自动转换为rem单位，并且使用html-webpack-plugin插件生成HTML文件并插入meta标签，以此来设置rem单位基准值。这样能够方便快捷地实现移动端适配。

示例

示例一：使用rem作为单位

假设你有一个设计稿，比如375*667，然后你将设计稿给前端同事，要求实现与设计稿一样的效果。

1. 在你的根组件中设置根元素的font-size大小。比如：

html {
  font-size: 100px;
}

1. 在你的scss文件中，所有的数字都使用rem作为单位。比如：

.box {
  width: 2rem;
  height: 4rem;
  font-size: 0.6rem;
}

这样，在不同分辨率下，rem单位所代表的大小是不同的。比如在iPhone 6s上，1rem等于 375/7.5/100=0.5px。

示例二：使用vw作为单位

假设你有一个设计稿，比如375*667，同时你的视口宽度为360px，希望你的页面在不同的屏幕大小上都能够保持设计稿一致的效果。

1. 将所有的尺寸属性（例如，width、height、font-size等）写成vw单位。比如：

.box {
  width: 50vw;
  height: 20vw;
  font-size: 5vw;
}

这个时候，在不同的屏幕上，vw单位所代表的大小也是不同的。比如在iPhone 6s上，1vw等于 375/100=3.75px。因此，在iPhone 6s上，上述box的宽度为 50*3.75=187.5px。

1. 使用组件级别的css，配合position和transform调整UI页面。比如：

.box {
  position: absolute;
  left: 50vw;
  top: 50vw;
  transform: translate(-50%, -50%);
}

这个时候，可以使用vw作为left和top，然后使用transform来让组件居中。这样，无论在哪种分辨率的手机上，都能实现中心对齐的效果。