全面解读移动端适配方案：rem、postcss-pxtorem、postcss-px-to-viewport、vw vh

2022-12-03 20:48:21

移动端适配：让你的网站在移动设备上焕发光彩

随着移动互联网的蓬勃发展，用户越来越习惯于使用手机和平板电脑等移动设备浏览网页。为了确保网站在移动设备上也能得到良好的显示效果，移动端适配方案应运而生。下面我们将详细介绍几种常见的移动端适配方案，帮助你让你的网站在移动设备上焕发光彩。

1. rem：简单易用的相对单位

rem（root em）是一种相对单位，它的值相对于根元素（通常是 html 元素）的 font-size。在移动端适配中，通常的做法是将根元素的 font-size 设置为 100px，这样 1rem 就等于 100px。这种方案的优点是简单易用，只需要修改根元素的 font-size 就可以实现全局的字体大小调整。缺点是对于某些需要精确控制元素尺寸的场景，rem 可能不够灵活。

代码示例：

html {
  font-size: 100px;
}

body {
  font-size: 1.6rem; /* 16px */
}

h1 {
  font-size: 2.4rem; /* 24px */
}

2. postcss-pxtorem：转换 px 到 rem 的利器

postcss-pxtorem 是一个 PostCSS 插件，可以将 px 单位的 CSS 属性值转换为 rem 单位。这种方案的优点是既可以保留 px 单位的灵活性，又可以避免因根元素的 font-size 改变而导致的布局错乱。缺点是需要使用 PostCSS 编译 CSS 代码，可能会增加项目构建的复杂度。

代码示例：

/* 使用 postcss-pxtorem 插件 */
@import "postcss-pxtorem";

/* 设置转换规则 */
pxtorem({
  rootValue: 100,
  unitPrecision: 5,
  propList: ["*", "!font-size"]
});

3. postcss-px-to-viewport：打造响应式布局

postcss-px-to-viewport 是另一个 PostCSS 插件，可以将 px 单位的 CSS 属性值转换为 vw、vh 或 vmin 单位。这种方案的优点是可以在不同的设备上实现响应式的布局，并且不受根元素的 font-size 影响。缺点是需要使用 PostCSS 编译 CSS 代码，可能会增加项目构建的复杂度。

代码示例：

/* 使用 postcss-px-to-viewport 插件 */
@import "postcss-px-to-viewport";

/* 设置转换规则 */
px-to-viewport({
  viewportWidth: 375, /* 设备视口宽度 */
  viewportHeight: 667, /* 设备视口高度 */
  unitPrecision: 3,
  viewportUnit: "vw", /* 转换目标单位，可以是 vw、vh 或 vmin */
  selectorBlackList: [".ignore-class"] /* 排除不转换的元素 */
});

4. vw、vh：基于视口的灵活性

vw 和 vh 是视口单位，vw 的值相对于视口的宽度，vh 的值相对于视口的高度。这种方案的优点是可以实现响应式的布局，并且不受根元素的 font-size 影响。缺点是对于某些需要精确控制元素尺寸的场景，vw 和 vh 可能不够灵活。

代码示例：

body {
  width: 100vw; /* 宽度等于视口宽度 */
  height: 100vh; /* 高度等于视口高度 */
}

h1 {
  font-size: 2.4vw; /* 字体大小等于视口宽度的 2.4% */
}

移动端适配方案的选择

在选择移动端适配方案时，需要考虑以下几个因素：

项目的复杂度：如果项目比较简单，使用 rem 方案就可以满足需求。如果项目比较复杂，需要考虑使用 postcss-pxtorem、postcss-px-to-viewport 或 vw、vh 方案。
对精确控制元素尺寸的需求：如果项目中需要精确控制元素尺寸，需要考虑使用 px 或 em 方案。如果项目中不需要精确控制元素尺寸，可以使用 rem、vw 或 vh 方案。
对 PostCSS 的熟悉程度：如果熟悉 PostCSS，可以使用 postcss-pxtorem 或 postcss-px-to-viewport 方案。如果对 PostCSS 不熟悉，可以使用 rem 或 vw、vh 方案。