diff --git a/docs/markdown/advanced-usage.en-US.md b/docs/markdown/advanced-usage.en-US.md index bb588bbb7..f78091d35 100644 --- a/docs/markdown/advanced-usage.en-US.md +++ b/docs/markdown/advanced-usage.en-US.md @@ -2,16 +2,37 @@ ## Browser adaptation -### Rem Units +### Viewport Units -Vant uses `px` unit by default,you can use tools such as `postcss-pxtorem` to transform units to `rem`. +Vant uses `px` unit by default,you can use tools such as [postcss--px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) to transform `px` unit to viewport units (vw, vh, vmin, vmax). + +#### PostCSS Config + +PostCSS config example: + +```js +module.exports = { + plugins: { + autoprefixer: { + browsers: ['Android >= 4.4', 'iOS >= 8'], + }, + 'postcss-px-to-viewport': { + viewportWidth: 375, + }, + }, +}; +``` + +### Rem Unit + +You can use tools such as `postcss-pxtorem` to transform `px` unit to `rem` unit. - [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) - [lib-flexible](https://github.com/amfe/lib-flexible) #### PostCSS Config -Postcss config example: +PostCSS config example: ```js module.exports = { diff --git a/docs/markdown/advanced-usage.zh-CN.md b/docs/markdown/advanced-usage.zh-CN.md index 971d891e3..f79e3b7b5 100644 --- a/docs/markdown/advanced-usage.zh-CN.md +++ b/docs/markdown/advanced-usage.zh-CN.md @@ -57,16 +57,41 @@ export default { ## 浏览器适配 +### Viewport 布局 + +Vant 默认使用 `px` 作为样式单位,如果需要使用 `viewport` 单位 (vw, vh, vmin, vmax),推荐使用 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 进行转换。 + +[postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。 + +#### PostCSS PostCSS 示例配置 + +下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。 + +```js +module.exports = { + plugins: { + autoprefixer: { + browsers: ['Android >= 4.4', 'iOS >= 8'], + }, + 'postcss-px-to-viewport': { + viewportWidth: 375, + }, + }, +}; +``` + +> Tips: 在配置 postcss-loader 时,应避免 ignore node_modules 目录,否则将导致 Vant 样式无法被编译。 + ### Rem 布局适配 -Vant 中的样式默认使用 `px` 作为单位,如果需要使用 `rem` 单位,推荐使用以下两个工具: +如果需要使用 `rem` 单位进行适配,推荐使用以下两个工具: -- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件,用于将单位转化为 rem +- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位 - [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值 -#### PostCSS 配置 +#### PostCSS 示例配置 -下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改。 +下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。 ```js module.exports = { @@ -82,8 +107,6 @@ module.exports = { }; ``` -> Tips: 在配置 postcss-loader 时,应避免 ignore node_modules 目录,否则将导致 Vant 样式无法被编译。 - ### 桌面端适配 Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 `touch` 事件,没有监听桌面端的 `mouse` 事件。