vue 配置移动单位转换插件 postcss-px-to-viewport
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`
}
}
}
注意:
vue 配置移动单位转换插件 postcss-px-to-viewport的更多相关文章
- 自动把网页px单位转换成rem
自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果
- 【转】Android中dip(dp)与px之间单位转换
Android中dip(dp)与px之间单位转换 dp这个单位可能对web开发的人比较陌生,因为一般都是使用px(像素)但是,现在在开始android应用和游戏后,基本上都转换成用dp作用为单位了,因 ...
- Android原生系统API自带dp、px、sp单位转换
Android系统中自带的Api中可以使用TypedValue进行单位转换 1,调用系统api转换单位 // 获得转换后的px值 float pxDimension = TypedValue.appl ...
- sublime插件之px转rem
sublime插件之px转rem 安装: 1.下载sublime并安装: 2.下载cssrem:https://github.com/hyb628/cssrem: 3.找到 Packages (首 ...
- Android 尺寸单位转换和屏幕适配相关
Android 尺寸单位转换和屏幕适配相关 各种尺寸单位的意义 dp: Density-independent Pixels 一个抽象的单元,基于屏幕的物理密度. (dp和dip的意义相同,所以不用区 ...
- 2-3 vue配置介绍
一.通过vue-cli构建的项目的文件介绍 1.bulid文件夹 ==> 项目打包的配置文件夹 2.config文件夹 ==> 打包的配置 3.src文件夹 ==> 项目开发的源码 ...
- spring-boot前端参数单位转换
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import ja ...
- 基于 Vue BootStrap的迷你Chrome插件
代码地址如下:http://www.demodashi.com/demo/14306.html 安装 安装 Visual Studio Code 和Chrome, 自行FQ 详细安装这里略过 安装包管 ...
- Android屏幕尺寸单位转换
最近在看Android群英传这本书,书中有一节涉及到了,屏幕尺寸与单位.觉得以后可能会用到,做个笔记. PPI(pixels per inch) ,又称为DPI,它是由对角线的像素点数除以屏幕的大小得 ...
随机推荐
- AIX如何点亮HBA卡
不要选中分区,选择系统管理下的服务器即可 LED状态----->启动Advanced System Management(ASM) UserID: admin Password:admin S ...
- .NET Core+WebApi+EF访问数据新增用户数据
新建一个.NET Core项目,我使用的IDE是VS2019 依次创建三个Core类库:第一个命名api.Model,第二个api.Common,第三个api.Bo 解释一下这个三类库的作用: 第一个 ...
- 数学--博弈论--巴什博奕(Bash Game)
终于也轮到我做游戏了,他们做了好几个月的游戏了. 巴什博弈: 两个人做游戏,取石子,一个人最多可以可以取M个,至少取1个,最后取完的赢. 显然,如果n=m+1,那么由于一次最多只能取m个,所以,无论先 ...
- 图论--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 ...
- python requests 接口测试
1.get方法请求接口 url:显而易见,就是接口的地址url啦 headers:请求头,例如:content-type = application/x-www-form-urlencoded par ...
- 蓝色展开收缩悬浮QQ客服代码
放在我的博客首页上的的预览图: 在文章区的预览图如下: 代码如下: <div class="scrollsidebar" id="scrollsidebar&quo ...
- OSG程序设计之Hello World1.0
对于从未接触过OSG的我来说,首先需要一个入门教程.在OSG论坛逛了半天,再加上google,最终决定使用<OSG程序设计>这本书. 下面就贴出书中的第一个例子:Hello World. ...
- springmvc与struts2执行流程比较
之前写过一篇struts2的执行流程的文章了,这里对struts2的流程就不做过多的分析,这篇文章主要分析spring-mvc的执行流程以 及struts2与spring-mvc的差别. 1.stru ...
- 仿站-获取网站的所有iconfont图标
在仿站过程中,网站的iconfont查找非常浪费时间,这里教大家一次性获取网站iconfont的方法 1.打开 开发者工具 在element中搜索font-face,结果如下,复制font-face所 ...
- 设计模式GOF23之单例模式
单例模式的五种方式 主要:懒汉式,饿汉式 其他:双重检测锁(Double Checking模式),静态内部类,枚举模式 选取时机 延时加载,占用内部资源大:静态内部类好于懒汉 不延时加载,占用内部资源 ...