Vue2 - 项目中的 vw 适配

最新推荐文章于 2024-06-09 17:58:57 发布

究极无敌暴龙战神X

最新推荐文章于 2024-06-09 17:58:57 发布

阅读量425

点赞数 9

分类专栏： Web前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_56101688/article/details/135716318

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vant2项目中通过安装并配置`postcss-px-to-viewport`插件，将像素值转换为视窗宽度单位vw，以便实现响应式设计。示例展示了在App.vue中的应用和配置过程。

摘要由CSDN通过智能技术生成

目标：基于 postcss 插件实现项目 vw 适配
Vant 2官方配置
① 安装插件

yarn add postcss-px-to-viewport@1.1.1 -D

② 根目录新建 postcss.config.js 文件，填入配置

// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
// 标准屏宽度
viewportWidth: 375
}
}
}

代码

App.vue

<template>
  <div id="app">
    <div class="box"></div>
    <!-- 测试代码 -->
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-switch v-model="checked" />
    <van-rate v-model="score" />

    <router-view/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      checked: true,
      score: 5
    }
  }
}
</script>
<style lang="less">
.box{
  width: 300px;
  height: 300px;
  background-color:pink ;
}
</style>