docs: add "adapt to PC browsers"

This commit is contained in:
chenjiahan
2020-10-24 17:38:14 +08:00
parent 2206e77cc5
commit ea896803a0
3 changed files with 20 additions and 6 deletions

View File

@@ -2,16 +2,16 @@
## Browser adaptation
### Rem units
### Rem Units
Vant use `px` as size units by defaultyou can use tools such as `postcss-pxtorem` to transform units to `rem`.
Vant uses `px` unit by defaultyou can use tools such as `postcss-pxtorem` to transform units to `rem`.
- [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 = {
@@ -26,3 +26,17 @@ module.exports = {
},
};
```
### 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.
```bash
# Install
npm i @vant/touch-emulator -S
```
```js
// Just import this module, then Vant works in PC browser
import '@vant/touch-emulator';
```

View File

@@ -35,9 +35,9 @@ module.exports = {
### 桌面端适配
Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的`touch`事件,没有监听桌面端的`mouse`事件。
Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 `touch` 事件,没有监听桌面端的 `mouse` 事件。
如果你需要在桌面端使用 Vant可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator),这个库会在桌面端自动将`mouse`事件转换成对应的`touch`事件,使得组件能够在桌面端使用。
如果你需要在桌面端使用 Vant可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator),这个库会在桌面端自动将 `mouse` 事件转换成对应的 `touch` 事件,使得组件能够在桌面端使用。
```bash
# 安装模块