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. 09-5.部署 EFK 插件

    09-5.部署 EFK 插件 EFK 对应的目录:kubernetes/cluster/addons/fluentd-elasticsearch $ cd /opt/k8s/kubernetes/cl ...

  2. Retrofit的文件上传和进度提示

    2019独角兽企业重金招聘Python工程师标准>>> 1.写一个上传监听的接口: /** * Created by Zzm丶Fiona on 2017/7/31. */ publi ...

  3. 父级元素绑定定mouseout和mouseover,移过子元素是都会触发

    2019独角兽企业重金招聘Python工程师标准>>> mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标 ...

  4. EntityFramework 迁移遇到的问题

    2019独角兽企业重金招聘Python工程师标准>>> 添加迁移add-migration migrationname 更新数据Update-Database EntityFrame ...

  5. Https双向验证与Springboot整合测试-人来人往我只认你

    1 简介 不知不觉Https相关的文章已经写了6篇了,本文将是这个专题的最后一篇,起码近期是最后一篇.前面6篇讲的全都是单向的Https验证,本文将重点介绍一下双向验证.有兴趣的同学可以了解一下之前的 ...

  6. 布局问题杂(html和css)

    \(一.删除线可以用一对strike标签括起来\) <p><strike>删除线可以用一对strike标签括起来</strike></p> \(\col ...

  7. G. 神圣的 F2 连接着我们 线段树优化建图+最短路

    这个题目和之前写的一个线段树优化建图是一样的. B - Legacy CodeForces - 787D 线段树优化建图+dij最短路 基本套路 之前这个题目可以相当于一个模板,直接套用就可以了. 不 ...

  8. OpenWrt R2020.3.11 去广告 抗污染 加速 PSW 无缝集成 UnPnP NAS

    近期更新:OpenWrt R2020.3.11版本2020.03.16编译. 按大家要求,新发布固件携带了编译时用到的全部软件包 加入了国内域名加速解析脚本 解决了原去广告,DNS优化方案与PSW冲突 ...

  9. jQuery中操作属性的方法attr与prop的区别

    attr 与 prop 都可以对某个属性进行获取和设置的操作,二者的用法相同: <script src = 'jQuery.js'></script> <script&g ...

  10. Spring整合Durid数据源

    Spring整合Durid数据源 一.导入依赖 <!-- Druid数据源 --> <dependency> <groupId>com.alibaba</gr ...