1.先安装插件

npm install postcss-px-to-viewport --save-dev

2.在文件根目录下添加 postcss.config.js 文件

 module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度.
viewportHeight: 667, // 视窗的高度,对应的是我们设计稿的高度.(也可以不配置)
unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'], // 指定不需要转换的类,后面再讲.
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位.
mediaQuery: false // 允许在媒体查询中转换`px`
}
}
}

注意: 

selectorBlackList 中的 ignore 是类名,添加该类名即可以不需要转换

vue 配置移动单位转换插件 postcss-px-to-viewport的更多相关文章

  1. 自动把网页px单位转换成rem

    自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果

  2. 【转】Android中dip(dp)与px之间单位转换

    Android中dip(dp)与px之间单位转换 dp这个单位可能对web开发的人比较陌生,因为一般都是使用px(像素)但是,现在在开始android应用和游戏后,基本上都转换成用dp作用为单位了,因 ...

  3. Android原生系统API自带dp、px、sp单位转换

    Android系统中自带的Api中可以使用TypedValue进行单位转换 1,调用系统api转换单位 // 获得转换后的px值 float pxDimension = TypedValue.appl ...

  4. sublime插件之px转rem

    sublime插件之px转rem   安装: 1.下载sublime并安装: 2.下载cssrem:https://github.com/hyb628/cssrem: 3.找到 Packages (首 ...

  5. Android 尺寸单位转换和屏幕适配相关

    Android 尺寸单位转换和屏幕适配相关 各种尺寸单位的意义 dp: Density-independent Pixels 一个抽象的单元,基于屏幕的物理密度. (dp和dip的意义相同,所以不用区 ...

  6. 2-3 vue配置介绍

    一.通过vue-cli构建的项目的文件介绍 1.bulid文件夹 ==> 项目打包的配置文件夹 2.config文件夹 ==> 打包的配置 3.src文件夹 ==> 项目开发的源码 ...

  7. spring-boot前端参数单位转换

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import ja ...

  8. 基于 Vue BootStrap的迷你Chrome插件

    代码地址如下:http://www.demodashi.com/demo/14306.html 安装 安装 Visual Studio Code 和Chrome, 自行FQ 详细安装这里略过 安装包管 ...

  9. Android屏幕尺寸单位转换

    最近在看Android群英传这本书,书中有一节涉及到了,屏幕尺寸与单位.觉得以后可能会用到,做个笔记. PPI(pixels per inch) ,又称为DPI,它是由对角线的像素点数除以屏幕的大小得 ...

随机推荐

  1. AIX如何点亮HBA卡

    不要选中分区,选择系统管理下的服务器即可 LED状态----->启动Advanced System Management(ASM) UserID:  admin Password:admin S ...

  2. .NET Core+WebApi+EF访问数据新增用户数据

    新建一个.NET Core项目,我使用的IDE是VS2019 依次创建三个Core类库:第一个命名api.Model,第二个api.Common,第三个api.Bo 解释一下这个三类库的作用: 第一个 ...

  3. 数学--博弈论--巴什博奕(Bash Game)

    终于也轮到我做游戏了,他们做了好几个月的游戏了. 巴什博弈: 两个人做游戏,取石子,一个人最多可以可以取M个,至少取1个,最后取完的赢. 显然,如果n=m+1,那么由于一次最多只能取m个,所以,无论先 ...

  4. 图论--2-SAT--POJ Ikki's Story IV - Panda's Trick

    Description liympanda, one of Ikki's friend, likes playing games with Ikki. Today after minesweeping ...

  5. python requests 接口测试

    1.get方法请求接口 url:显而易见,就是接口的地址url啦 headers:请求头,例如:content-type = application/x-www-form-urlencoded par ...

  6. 蓝色展开收缩悬浮QQ客服代码

    放在我的博客首页上的的预览图: 在文章区的预览图如下: 代码如下: <div class="scrollsidebar" id="scrollsidebar&quo ...

  7. OSG程序设计之Hello World1.0

    对于从未接触过OSG的我来说,首先需要一个入门教程.在OSG论坛逛了半天,再加上google,最终决定使用<OSG程序设计>这本书. 下面就贴出书中的第一个例子:Hello World. ...

  8. springmvc与struts2执行流程比较

    之前写过一篇struts2的执行流程的文章了,这里对struts2的流程就不做过多的分析,这篇文章主要分析spring-mvc的执行流程以 及struts2与spring-mvc的差别. 1.stru ...

  9. 仿站-获取网站的所有iconfont图标

    在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...

  10. 设计模式GOF23之单例模式

    单例模式的五种方式 主要:懒汉式,饿汉式 其他:双重检测锁(Double Checking模式),静态内部类,枚举模式 选取时机 延时加载,占用内部资源大:静态内部类好于懒汉 不延时加载,占用内部资源 ...