docs: update browser-adaptation

easy-temps · Dec 11, 2024 · c28544c · c28544c
1 parent 2bb9b88
commit c28544c
Showing 1 changed file with 43 additions and 6 deletions.
diff --git a/vue3-vant-mobile/browser-adaptation.md b/vue3-vant-mobile/browser-adaptation.md
@@ -9,13 +9,15 @@ outline: deep
 
 ## 适配方案 {#rem-or-vw}
 
-目前移动端适配主要有两种方案，包括 `vw` 布局和 `rem` 布局。vw（视口宽度）布局根据视口宽度进行尺寸调整；rem（文档根元素）布局则基于根元素字体大小，保证不同设备上文字和元素的相对比例一致。选择上，我们采用了 vw 方案，首先是因为它得到了众多浏览器的兼容，其次它不用像 rem 在运行时通过 JavaScript 设置根元素的 `font-size`。vw 让我们的代码更纯粹。
+目前移动端适配主要有两种方案，包括 vw 布局和 rem 布局。vw 布局根据视口宽度进行尺寸调整；rem 布局则基于文档根元素字体大小，保证不同设备上文字和元素的相对比例一致。
+
+选择上，我们**默认**采用了 vw 方案，首先是因为它得到了现代浏览器的支持，很少出现兼容性问题，其次它更容易理解，不用像 rem 动态修改根元素的 `font-size`。vw 让我们的代码更纯粹。
 
 ## Viewport 布局 {#viewport}
 
-Vant 组件和业务代码，全部采用 `px` 作为样式单位，如果需要使用 `viewport` 单位（`vw`, `vh`, `vmin`, `vmax`），我们推荐使用 [`postcss-mobile-forever`](https://github.com/wswmsword/postcss-mobile-forever) 进行转换。
+Vant 组件和业务代码，全部采用 `px` 作为样式单位，如果需要使用 `viewport` 单位（`vw`, `vh`, `vmin`, `vmax`），我们推荐使用 [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) 进行转换。
 
-它是一款 PostCSS 插件，用于将 `px` 单位转换为 `vw/vh` 单位。
+它是一款 PostCSS 插件，用于将 `px` 单位转换为 `vw` 单位。
 
 ### PostCSS 示例配置 {#postcss-example}
 
@@ -45,7 +47,7 @@ postcss: {
 
 但想象这样一个场景，当我们从桌面端访问我们移动应用的时候，我们的视图元素也会同比例放大，这让我们的使用体验非常差，甚至无法操作 `DOM` 元素。
 
-再次推荐 [`postcss-mobile-forever`](https://github.com/wswmsword/postcss-mobile-forever)，它不仅可以完成样式单位的转换，还对桌面端可访问性做了功能增强，提升了用户体验。我们只需要配置 `maxDisplayWidth` 属性，它可以限制视口单位的最大宽度。
+再次推荐 [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever)，它不仅可以完成样式单位的转换，还对桌面端可访问性做了功能增强，提升了用户体验。我们只需要配置 `maxDisplayWidth` 属性，它可以限制视口单位的最大宽度。
 
 ```ts{7}
 // vite.config.ts
@@ -61,10 +63,10 @@ postcss: {
 ```
 
 ::: warning
-桌面端访问的特性是通过 CSS 函数 `min()`、`max()`、`calc()` 实现的，请注意业务中有否老旧设备的投放场景，如果有，请关闭 `maxDisplayWidth` 选项。更多的兼容性情况可以查看 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min#browser_compatibility) 和 [caniuse.com](https://caniuse.com/css-math-functions)。
+桌面端访问的特性是通过 CSS 函数 `min()`、`max()`、`calc()` 实现的，请注意业务中有否老旧设备的投放场景，如果有，请关闭 `maxDisplayWidth` 选项或查看后面的 [Rem 布局](#rem)。更多的兼容性情况可以查看 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min#browser_compatibility) 和 [caniuse.com](https://caniuse.com/css-math-functions)。
 :::
 
-## 行内样式转换 {#inline-px-to-vw}
+### 行内样式转换 {#inline-px-to-vw}
 
 虽然这款 PostCSS 插件可以帮我们转换单位，但是像是一些行内样式单位它无法进行转换，因为这款插件是用于编译阶段的。我们需要一个运行时解决方案，在我们的行内样式需要转换的时候可以工作。好消息是，模板已经内置好这样一组函数。
 
@@ -96,6 +98,41 @@ import vw from '@/utils/inline-px-to-vw'
 <div :style="`width: ${vw(width)}; height: ${vw(height)}`"></div>
 ```
 
+## Rem 布局 {#rem}
+
+Viewport 布局使用 `max()` 等 CSS 函数实现，无法兼容老旧设备，会出现样式错乱问题。
+
+为了解决兼容问题，同时希望限制视图的最大宽度以适配桌面端屏幕，请按下面的配置启动 Rem 布局：
+
+```ts{8}
+// vite.config.ts
+postcss: {
+  plugins: [
+    viewport({
+      appSelector: '#app',
+      viewportWidth: 375,
+      maxDisplayWidth: 600,
+      mobileUnit: 'rem',
+    }),
+  ],
+}
+```
+
+相比 Viewport 布局配置，多了一行 `mobileUnit: 'rem'` 选项来指定 Rem 布局。添加配置后，在全局样式文件中添加一个空的 `<html>` 样式（若已存在则无需添加）：
+
+```css{1}
+html { }
+body, p, li {
+  margin: 0;
+  /* 省略样式 */
+}
+/* 省略其它选择器样式 */
+```
+
+恭喜你！已经完成了 Rem 布局的适配，现在请重新检查兼容性问题是否解决。
+
+> 遇到问题[扫码进群](/vue3-vant-mobile/#feedback)或提交[议题](https://github.com/easy-temps/vue3-vant-mobile/issues)寻求帮助。
+
 ## 原子化 CSS (Atomic CSS) {#atomic-css}
 
 目前，我们已经基本覆盖了常规 `css` 单位的转换。但是像是原子化 CSS 框架，比如 `Tailwind CSS`，`Windi CSS`，以及我们模板内置的 `Unocss`，它们都使用 `rem` 单位作为样式单位。面对这种新的情况，我们需要将 `rem` 转成 `px`，再由 PostCSS 插件把 `px` 转成 `vw`。