cd example/react/
npm install
npm run start

• 原生 JS 的 max-vw-mode。（代码/演示）
• Next.js 的 max-vw-mode。（代码）
• Nuxt 的 max-vw-mode。（代码）
• 原生 JS 的 mq-mode。（代码/演示）
• React 的 mq-mode。（代码/演示）
• Vue 的 mq-mode。（代码/演示）
• Svelte 的 mq-mode。（代码/演示）
• Vue 使用 Vant TabBar 的 mq-mode。（代码/演示）

• v-shop，🛒 v-shop 是一个移动端 H5 商城。（代码/演示）
• vue-h5-template，一个快速开发的 Vue H5 移动端脚手架。（代码/演示）
• KITE-TRIP，一个简单的旅游应用模版。（代码/演示）
• vue3-calendar，基于 Vue3 实现的万年历、老黄历、日历。（代码/演示）

postcss.config.js 有好几种配置格式，下面是其中一种配置方法：

import mobile from 'postcss-mobile-forever' // <---- 这里
import autoprefixer from 'autoprefixer'
// 省略……
{
	postcss: {
		plugins: [
			autoprefixer(),
			mobile({ // <---- 这里
				appSelector: '#app',
				viewportWidth: 375,
				maxDisplayWidth: 580,
			}),
		]
	}
}
// 省略……

https://github.com/webpack-contrib/postcss-loader/issues/172

下面是属性 side 的子属性，每一个属性都是可选的，side 用于配制侧边内容，只有当打开媒体查询模式、disableDesktop 为 false 的时候，side 将生效：

下面是属性 comment 的子属性，每一个属性都是可选的，comment 用于自定义注释：

下面的配置会激活 max-vw-mode，使用 CSS 函数限制视口单位的最大值，当屏幕宽度超过 600px 后，视图不会再变化：

{
  "viewportWidth": 750,
  "appSelector": "#app",
  "maxDisplayWidth": 600
}

下面的配置会激活 mq-mode，生成媒体查询，适配桌面端和横屏，桌面端视图的宽度是 600px，横屏的宽度是 425px：

{
  "viewportWidth": 750,
  "appSelector": "#app",
  "enableMediaQuery": true
}

如果暂时不希望优化视图在大屏的可访问性，不做最大宽度的限制，可以像下面这样配置激活 vw-mode：

{
  "viewportWidth": 750
}

{
  "viewportWidth": 750,
  "maxDisplayWidth": null,
  "enableMediaQuery": false,
  "desktopWidth": 600,
  "landscapeWidth": 425,
  "minDesktopDisplayWidth": null,
  "maxLandscapeDisplayHeight": 640,
  "appSelector": "#app",
  "appContainingBlock": "calc",
  "necessarySelectorWhenAuto": null,
  "border": false,
  "disableDesktop": false,
  "disableLandscape": false,
  "disableMobile": false,
  "exclude": null,
  "include": null,
  "unitPrecision": 3,
  "selectorBlackList": [],
  "valueBlackList": [],
  "rootContainingBlockSelectorList": [],
  "verticalWritingSelectorList": [],
  "propList": ["*"],
  "mobileUnit": "vw",
  "side": {
    "width": null,
    "gap": 18,
    "selector1": null,
    "selector2": null,
    "selector3": null,
    "selector4": null,
    "width1": null,
    "width2": null,
    "width3": null,
    "width4": null
  },
  "comment": {
    "applyWithoutConvert": "apply-without-convert",
    "rootContainingBlock": "root-containing-block",
    "notRootContainingBlock": "not-root-containing-block",
    "ignoreNext": "mobile-ignore-next",
    "ignoreLine": "mobile-ignore",
    "verticalWritingMode": "vertical-writing-mode"
  },
  "customLengthProperty": {
    "rootContainingBlockList_LR": [],
    "rootContainingBlockList_NOT_LR": [],
    "ancestorContainingBlockList": [],
    "disableAutoApply": false
  },
  "experimental": {
    "extract": false,
    "minDisplayWidth": null
  }
}

插件配置：

{
  "viewportWidth": 750,
  "maxDisplayWidth": 560,
  "mobileUnit": "rem",
  "appSelector": "#app"
}

输入范例：

html {}

#app {
  width: 100%;
}

.nav {
  position: fixed;
  width   : 100%;
  height  : 72px;
  left    : 0;
  top     : 0;
}

输出范例：

html {
  font-size: 13.333333333333334vw !important;
}

#app {
  max-width   : 560px !important;
  margin-left : auto !important;
  margin-right: auto !important;
  width       : 100%;
}

.nav {
  position: fixed;
  width   : 7.5rem;
  height  : 0.72rem;
  left    : calc(50% - 3.75rem);
  top     : 0;
}

@media (min-width: 560px) {
  html {
    font-size: 74.66666666666667px !important;
  }
}

插件配置：

{
  "appSelector": "#app",
  "enableMediaQuery": true
}

输出范例：

#app {
  width: 100%;
}

.nav {
  position: fixed;
  width   : 100%;
  height  : 9.6vw;
  left    : 0;
  top     : 0;
}

/* 桌面端媒体查询 */
@media (min-width: 600px) and (min-height: 640px) { /* 这里的 600 是默认值，可以自定义 */
  #app {
    max-width: 600px !important;
  }

  .nav {
    height: 57.6px;
    top   : 0;
    left  : calc(50% - 300px); /* calc(50% - (600 / 2 - 0 * 600 / 750)px) */
    width : 600px; /* 100% -> 600px */
  }
}

/* 移动端媒体查询 */
@media (min-width: 600px) and (max-height: 640px),
(max-width: 600px) and (min-width: 425px) and (orientation: landscape) { /* 这里的 640 和 425 是默认值，可自定义 */
  #app {
    max-width: 425px !important;
  }

  .nav {
    height: 40.8px;
    top   : 0;
    left  : calc(50% - 212.5px); /* calc(50% - (425 / 2 - 0 * 425 / 750)px) */
    width : 425px; /* 100% -> 425px */
  }
}

/* 桌面端和移动端公共的媒体查询 */
@media (min-width: 600px),
(orientation: landscape) and (max-width: 600px) and (min-width: 425px) {
  #app {
    margin-left : auto !important;
    margin-right: auto !important;
  }
}

相比使用 CSS 函数，使用媒体查询限制宽度，生成的代码量更大。

.position {
	position: fixed;
}
/* root-containing-block */
.top-box {
	right: 0;
	bottom: 0;
	width: 66px;
	height: 66px;
	border-radius: 9px;
}

• 打开选项后，样式文件会被分割为 mobile.xxx.css、landscape.xxx.css 和 desktop.xxx.css，这有利于使用代码分割进行产包优化;
• 该选项需要设置 css-loader 的 modules.getLocalIdent 选项，需要从本插件导入 remakeExtractedGetLocalIdent 函数进行传递，这是为了防止选择器名称中的哈希值出现错误（哈希值会通过文件路径计算，而被分割的文件路径是不同的）；
• 暂时不支持热重载，可以仅在生产模式下打开该选项；
• 被分割的文件暂时不支持运行本插件（postcss-mobile-forever）后面的其它 postcss 插件；
• 如果使用 HtmlWebpackPlugin 自动插入样式产包，需要注意顺序，顺序可以通过 optimization.splitChunks.cacheGroups.[group].priority 来决定，优先级越高，插入到 html 的顺序越靠前。

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { defaultGetLocalIdent } = require("css-loader");
const { remakeExtractedGetLocalIdent } = require("postcss-mobile-forever");

const isProdMode = process.env.NODE_ENV === "production";

module.exports = {
  mode: isProdMode ? "production" : "development",
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "build"),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [isProdMode ? MiniCssExtractPlugin.loader : "style-loader", {
          loader: "css-loader",
          options: {
            modules: {
              localIdentName: isProdMode ? "[hash:base64]" : "[path][name]__[local]",
              getLocalIdent: isProdMode ? remakeExtractedGetLocalIdent({ defaultGetLocalIdent }) : undefined, // 开发环境不分割，因此设置为 undefined
            },
          }
        }, {
          loader: "postcss-loader",
          options: {
            postcssOptions: [
              ["postcss-mobile-forever", {
                appSelector: ".root-class",
                experimental: {
                  extract: isProdMode, // 生产环境打开文件的提取
                },
              }]
            ]
          }
        }],
      }
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        desktop: {
          chunks: "all",
          enforce: true,
          test: /desktop[^\\/]*?\.css$/, // 分割桌面端样式
          name: "desktop",
          priority: 101, // 第三位被加载
        },
        landscape: {
          chunks: "all",
          enforce: true,
          test: /landscape[^\\/]*?\.css$/, // 分割横屏样式
          name: "landscape",
          priority: 102, // 第二位被加载
        },
        mobile: {
          chunks: "all",
          enforce: true,
          test: /mobile[^\\/]*?\.css$/, // 分割移动端样式
          name: "mobile",
          priority: 103, // 第一位被加载
        },
      }
    }
  },
};

下面的例子，默认的情况，--len-a 的值在桌面端会被转为 60px，横屏会被转为 42.5px，但是可以看到实际的应用场景中，定位是 fixed，因此包含块是根包含块，所以默认的转换是错误的，正确的转换应该是，桌面端会被转为 calc(50% - 240px)，横屏会被转为 calc(50% - 170px)。

:root {
  --len-a: 75px;
}
.rule {
  left: var(--len-a);
  position: fixed;
}

上面的例子中，如果要正确的转换，需要在配置中明确指定，--len-a 用于根包含块，并且被用于 left 属性：

{
  // ...其它配置
  customLengthProperty: {
    rootContainingBlockList_LR: ["--len-a"]
  }
}

<style>
  body {
    margin: 0;
  }
  #iframe {
    max-width: 520px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: block;
  }
</style>
<body>
  <!-- vw-index.html 为 postcss-px-to-viewport 转换后的伸缩界面 -->
  <iframe id="iframe" src="./vw-index.html" frameborder="0"></iframe>
<body>