vuecli4中配置px自动转换vw

浅浅的花香味﹌ 2022-09-02 00:43 209阅读 0赞

元气满满，直接干~~~

移动端使用vw实现响应式布局时，需要自己计算vm的数值，非常难用！

什么是vw：默认将屏幕宽度分为100份，1vw = 一份。

在vuecli4中使用一个插件，让我们在开发时照常写px，而插件可以将px自动转换vw。非常好用！

1. 下载 \``npm i postcss-px-to-viewport -D`\`

2. 在项目根目录下创建 \``.postcssrc.js`\` 作为配置文件

3. 添加以下配置：

const path = require('path');
    
    module.exports = ({ file }) => {
      const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
    
      return {
        plugins: {
          autoprefixer: {},
          "postcss-px-to-viewport": {
          unitToConvert: "px", // 要转化的单位
          viewportWidth: designWidth, // UI设计稿的宽度  750/640
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          landscape: false // 是否处理横屏情况
          }
        }
      }
    }

4. 重新编译项目

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 vscode安装px to rem & rpx & vw (cssrem) 插件及配置

1.安装 ![f3b3f5407fc04986b0c41ea1cd74d77a.png][] 2配置 ![bc3c521d577f4c8f93960fff8e8c

淡淡的烟草味﹌/ 2023年10月09日 14:19/ 0 赞/ 31 阅读

相关 sass px转vw

> 如今移动端对 vw/vh 的尺寸单位基本兼容，对代码有洁癖的开发者们不想用js去计算rem的值了。 > > 网上有许多有关在 sass 中 px转rem的文章了，今天小编

忘是亡心i/ 2023年06月21日 07:18/ 0 赞/ 47 阅读

相关 vuecli4中关闭Eslint

元气满满，直接干！如果在创建项目时选择了eslint，而你又无法驾驭它，噩梦就开始。各种报错，让你非常难受！这时我们就要关闭eslint，过程非常简单。 1. 在项目

「爱情、让人受尽委屈。」/ 2022年09月02日 00:45/ 0 赞/ 357 阅读

相关 vuecli4中配置请求代理解决跨域

元气满满，直接干！开发项目时，给的测试接口需要跨域，这就非常难受！在vuecli中，可以通过配置请求代理，解决接口跨域问题。配置过程很简单。 1. 在根目录下添加 \

绝地灬酷狼/ 2022年09月02日 00:44/ 0 赞/ 306 阅读

相关 vuecli4中配置服务器

元气满满，直接干！在使用vuecli4开发项目时，如果需要自己开发服务器测试项目，单独编写一个服务器，非常难受！这时，我们可以在vuecli4中直接进行服务器开发。过

女爷i/ 2022年09月02日 00:44/ 0 赞/ 297 阅读

相关 vuecli4中配置打包使用相对路径

元气满满，直接干！使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！这时我们就需要在设置打包使用相对目录的方

╰半橙微兮°/ 2022年09月02日 00:44/ 0 赞/ 334 阅读

相关 vuecli4中手动配置less或者scss

元气满满，直接干~~ 假设我们创建项目时选择的是scss，但是项目中我们突然想要使用less,直接使用的话就会报错，非常难受。这时我们需要做的非常简单，只需要在项目中安装

布满荆棘的人生/ 2022年09月02日 00:43/ 0 赞/ 308 阅读

相关 vuecli4中配置px自动转换vw

元气满满，直接干~~~ 移动端使用vw实现响应式布局时，需要自己计算vm的数值，非常难用！什么是vw：默认将屏幕宽度分为100份，1vw = 一份。在vuecli4中

浅浅的花香味﹌/ 2022年09月02日 00:43/ 0 赞/ 210 阅读

相关 react中将px转化为rem或者vw

一、px转rem 1、执行显示webpack配置 npm run eject 2、安装 postcss-px2rem-exclude、lib-flexible、s

灰太狼/ 2021年12月23日 11:25/ 0 赞/ 1198 阅读

相关 px，em，rem，vw的简单介绍

一、px，em，rem，vw的简单介绍 1、px px其实就是像素的意思，全称pixel，也就是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的

向右看齐/ 2021年11月22日 11:50/ 0 赞/ 444 阅读