vue中px 转 vh/vw

安装插件

npm install postcss-px-to-viewport --save -dev
(直接在vscode 中安装插件 px to rem & rpx & vw (cssrem))

postcss.config.js 配置

module.exports = {plugins: {// to edit target browsers: use "browserslist" field in package.json'autoprefixer': {},'postcss-px-to-viewport': {// optionsunitToConvert: "px", // 要转化的单位viewportWidth: 1920, // UI设计稿的宽度// viewportHeight: 1080,unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/, /GlobalApi/], // 设置忽略文件，GlobalApi 只需要写文件名称即可//include: [/Multistage/], 设置包含文件只转换当前文件 landscape: false // 是否处理横屏情况}}
}
** 如果使用 include的话 需要在 package.js 中这样写"postcss-px-to-viewport": "https://github.com/evrone/postcss-px-to-viewport.git", 重新 cnpm/npm install 安装依赖 ** **或者地址安装 cnpm/npm i https://github.com/evrone/postcss-px-to-viewport --save-dev**

vscode 安装

px to rem & rpx & vw (cssrem)
// 然后再去 setting.js 设置 cssrem 设计稿宽度

vue中px 转 vh/vw相关推荐

7、em/px/rem/vh/vw区别？
简介 em/px/rem/vh/vw都属于css的单位,这些单位可以分为相对单位,绝对单位 px:绝对单位,网页按照精确像素来显示 em:相对单位,相对自身定义的font-size来计算,自身没有设置 ...
说说em/px/rem/vh/vw的区别
一.介绍传统的项目开发中,我们只会用到px.%.em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem.vh ...
vue中px转rem教程
1:下载插件安装px2rem-loader(devDependencies) npm install px2rem-loader -D 移动端适配解决npm包 "lib-flexible& ...
vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）
一.vue中自适应rem的设置新建文件src/libs/rem.js function setRem() {// 750px为设计稿视口宽度字体大小默认18px;const screenWidth ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...
px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
css px em rem % vw vh vm 区别
前言在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...
web开发之长度单位：px, pt, rem, vw, vh
在前端开发中,常常会碰到各种长度单位,比如 px, em, rem, vw 等. 总的来说,可以把这些长度单位分成两类:绝对长度单位和相对长度单位. 绝对长度单位绝对长度单位是一个固定的值,一个 ...
css中vh/vw与%的区别
1. vh 与 vw 的区别 vh 与 vw 都是根据窗口大小比例适应显示, 1vw = 窗口宽度的1% 1vh = 窗口高度的1% vh 与 vw 差别仅在宽度或者高度 2. vh 与 vw 的与% ...

vue中px 转 vh/vw

安装插件

postcss.config.js 配置

vscode 安装

vue中px 转 vh/vw相关推荐

最新文章

热门文章