docs: add rem custom rootValue demo (#8575)

This commit is contained in:
neverland 2021-04-19 20:10:43 +08:00 committed by GitHub
parent a10474153c
commit 436da047e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 12 deletions

View File

@ -48,11 +48,9 @@ Vant uses `px` unit by defaultyou can use tools such as [postcss--px-to-viewp
PostCSS config example:
```js
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.4', 'iOS >= 8'],
},
'postcss-px-to-viewport': {
viewportWidth: 375,
},
@ -72,11 +70,9 @@ You can use tools such as `postcss-pxtorem` to transform `px` unit to `rem` unit
PostCSS config example:
```js
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
@ -85,6 +81,25 @@ module.exports = {
};
```
### Custom rootValue
If the size of the design draft is 750 or other sizes, you can adjust the `rootValue` to:
```js
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem version >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};
```
### Adapt to PC Browsers
Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.

View File

@ -105,11 +105,9 @@ Vant 默认使用 `px` 作为样式单位,如果需要使用 `viewport` 单位
下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。
```js
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.4', 'iOS >= 8'],
},
'postcss-px-to-viewport': {
viewportWidth: 375,
},
@ -131,11 +129,9 @@ module.exports = {
下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。
```js
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
@ -144,6 +140,25 @@ module.exports = {
};
```
#### 其他设计稿尺寸
如果设计稿的尺寸不是 375而是 750 或其他大小,可以将 `rootValue` 配置调整为:
```js
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};
```
### 桌面端适配
Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 `touch` 事件,没有监听桌面端的 `mouse` 事件。