关于将px转换为vw vh的解决方案

什么是vw(Viewport Width)和vh（Viewport Height）？
　　vw和vh是前端开发中的一个动态单位，是一个相对于网页视口的单位。
　　系统会将视口的宽度和高度分为100份，1vw占用视口宽度的百分之一，1vh占用视口高度的百分之一。
　　vw、vh和百分比不同的是，百分比永远都是以父元素为参考，而vw、vh是以视口作为参考。

结论：vw、vh是一个动态的单位，会随着视口的变化而变化（相对单位）。

我个人在做Vue项目的时候，一边想用vw、vh进行布局，一边又觉得px布局方便，因为蓝湖上边的切图是直接有视图的px大小。

所以就想如果有一个方案可以解决px转换为vw vh就太好不过了，我这边是直接在**.postcssrc.js**里边进行配置，下边是我的代码，大家可以参考一下，有问题请指出问题

npm i postcss-px-to-viewport -D
在项目根目录下添加.postcssrc.js文件
添加如下配置：

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

添加完配置之后需要重新运行
这个方案可以在我的Vue项目中直接把px单位转换为vw、vh

转载：https://www.cnblogs.com/ljyn/p/15229148.html

关于将px转换为vw vh的解决方案相关推荐

移动端布局-px转vw、vh
移动端布局长度单位转换一.场景描述二.实现方式 1.安装 2.配置 3.其他配置三.多规则配置一.场景描述一般我们做移动端网页开发时,设计稿一般都是固定的宽高的(比如750*1334).但是 ...
Vite + Vue3 项目中，使用 vw/vh 适配移动端，并通过 Android Studio 打包
目录 1. 使用 vw/vh 适配移动端 1.1 使用 vite 初始化项目 1.2 安装插件,将 px 转化成 vw 1.2.1 在 vite.config.ts 中,声明插件 1.2.2 手写 p ...
px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
响应式布局的常用解决方案对比(媒体查询.百分比.rem和vw/vh) px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应 px和视口在静态网页中,我们经常用像素( ...
响应式布局的常用解决方案(媒体查询、百分比、rem和vw/vh）
在前端开发过程中,静态网页通常需要适应不同分辨率的设备,常用的自适应解决方案包括媒体查询.百分比.rem.和vw /vh,本文主要分析px在移动端布局中的不足,以及几种不同的自适应解决方案一 ...
css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
认识css长度单位 px % em rem vh vw
目录长度单位 px % em rem vh.vw 总结长度单位在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...

关于将px转换为vw vh的解决方案

关于将px转换为vw vh的解决方案相关推荐

最新文章

热门文章