vue2pc和移动端
时间: 2023-12-11 09:32:22 浏览: 36
根据提供的引用内容,可以得知在Vue2中,可以通过动态组件和$store.state.device来控制当前展示的页面为pc端还是移动端。同时,为了适应移动端设备的屏幕大小不一,可以使用postcss-px-to-viewport将项目中的px单位转换为vw。
下面是一个简单的例子,演示如何在Vue2中实现pc端和移动端的切换,并使用postcss-px-to-viewport将px单位转换为vw:
1.在index.vue中定义pc.vue和m.vue组件,并使用动态组件和$store.state.device来控制当前展示的页面为pc端还是移动端:
```html
<template>
<div>
<component :is="device === 'pc' ? 'pc' : 'm'"></component>
</div>
</template>
<script>
import pc from './pc.vue'
import m from './m.vue'
export default {
components: {
pc,
m
},
computed: {
device() {
return this.$store.state.device
}
}
}
</script>
```
2.在postcss.config.js中配置postcss-px-to-viewport插件,将px单位转换为vw:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿宽度
unitPrecision: 3, // 转换后保留的小数位数
viewportUnit: 'vw', // 转换后的单位
selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名
minPixelValue: 1, // 小于等于1px的不转换
mediaQuery: false // 允许在媒体查询中转换px
}
}
}
```
3.在组件中使用vw单位代替px单位:
```html
<template>
<div class="container">
<div class="box"></div>
</div>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vw;
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
```
以上是一个简单的例子,演示了如何在Vue2中实现pc端和移动端的切换,并使用postcss-px-to-viewport将px单位转换为vw。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)