mirror of
https://github.com/youzan/vant.git
synced 2025-10-19 18:14:13 +00:00
docs: add rem custom rootValue demo (#8575)
This commit is contained in:
@@ -50,11 +50,9 @@ Vant uses `px` unit by default,you 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.
|
||||
|
Reference in New Issue
Block a user