docs: add rem custom rootValue demo (#8575)

This commit is contained in:
neverland
2021-04-19 20:10:43 +08:00
committed by chenjiahan
parent d096a2d5f5
commit 3b72d8970b
2 changed files with 42 additions and 12 deletions

View File

@@ -50,11 +50,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,
},
@@ -74,11 +72,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: ['*'],
@@ -87,6 +83,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.