vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw
作为一名前端开发,在做移动端适配时rem、vw是我们经常用到的单位,但是我们在实际开发过程中需要将设计稿上的px转换成rem,如果手动去计算,将是一个很耗时、费力的过程。这是就需要一个工具可以帮我们自动将px转成rem、vw。
开始之前,我们先来了解一个概念【PostCSS】
PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具,类似babel对js的处理。常见的功能如:
1 . 使用下一代css语法(cssnext)
2 . 自动补全浏览器前缀(autoprefixer)
3 . 自动把px代为转换成rem/vw(postcss-pxtorem/postcss-px-to-viewport)
4 . css代码压缩等等
PostCSS 只是一个工具,本身不会对css一顿操作,一般不单独使用,而是与已有的构建工具进行集成,通过插件实现功能。PostCSS 与主流的构建工具,如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后,选择满足功能需求的 PostCSS 插件并进行配置。
Webpack 中使用 PostCSS 插件示例:
postcss-loader 用来对.css 文件进行处理,并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。require('autoprefixer') 的作用是加载 Autoprefixer 插件。
言归正传,接下来我们看一下如果使用PostCSS把px自动转成rem、vw
postcss-pxtorem
功能:把px转换成rem
安装:npm install postcss-pxtorem --save-dev
配置项:
'postcss-pxtorem':{
rootValue:100,// html节点设的font-size大小,由于chrome最小12px,所以基值要设置大写
unitPrecision:5,// 转rem精确到小数点多少位
propList:['font','font-size','line-height','letter-spacing'],// 指定转换成rem的属性,支持 * !
selectorBlackList:[],// str或reg ,指定不转换的选择器,str时包含字段即匹配
replace:true,
mediaQuery:false,// 媒体查询内的px是否转换minPixelValue:0// 小于指定数值的px不转换
}
postcss-px-to-viewport
之前做移动端适配时,基本上是采用rem方案。但随着viewport越来越被大家熟悉,我们似乎发现了一种更好的方案。
功能:将px单位自动转换成viewport单位
安装:npm install postcss-px-to-viewport --save-dev
配置项:
'postcss-px-to-viewport': {
unitToConvert:'px', //要转换的单位,默认是'px'
viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750,默认是320
viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数,默认是5
propList: ['*'], //指定可以转换的css属性,默认是['*'],代表全部属性进行转换
viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
fontViewportUnit: 'vw', //指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false, // 允许在媒体查询中转换`px`
replace: true,
exclude: [], //设置忽略文件,如node_modules
}
vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw相关推荐
- 禁止git自动将lf转换成crlf
crlf 和 lf 是文本换行的不同方式: crlf: "\r\n", windows系统的换行方式 lf: "\n", Linux系统的换行方式 他们之间的不 ...
- vue项目全局把px转换成rem
vue项目全局把px转换成rem 首先vscode要有px to rem插件 1.vue.config.js 在vue.config.js中配置 css: {...// css预设器配置loaderO ...
- http_build_query()就是将一个数组转换成url 问号?后面的参数字符串,并且会自动进行urlencode处理,及它的逆向函数...
http_build_query()就是将一个数组转换成url 问号?后面的参数字符串,并且会自动进行urlencode处理 例如: $data = array('foo'=>'bar', 'b ...
- 自动将Map转换成对象的方法
实现自动将Map转换成对象,借助第三方工具commons-beanutils-1.8.0.jar+commons-logging.jar实现,需要遵守的规则创建的对象的属性名必须与map的key相同. ...
- php ppt自动播放,ppt如何循环播放,ppt如何添加视频设置自动播放(ppt转换成视频)...
演示文稿制作软件Microsoft Office PowerPoint,主要用于演示文稿的创建,即幻灯片的制作.可有效帮助演讲.教学,产品演示等,使用范围广泛.大家应该都比较熟悉吧.学习使用PPT,使 ...
- 考试自动评分系统C语言改错,基于XML结构的C语言考试的自动评分系统.doc
基于XML结构的C语言考试的自动评分系统 摘 要:在C程序设计语言考试中为了解决定位难.一题多解和对于主观题没有统一的评价标准的情况,对考试系统中客观题和程序题的评分方法进行了研究.在比较结果的评分基 ...
- vscode保存自动将CRLF 转换成 LF
1.下载vscode插件: EditorConfig for VS Code 2.在项目根目录新建 .editorconfig root = true [*] charset = utf-8 inde ...
- 对大数据量Excel文件自动排版、转换成PDF用于印刷出版
excel排版大师 下载 http://pan.baidu.com/s/1eQnY0hW 2015.3. 目录 一.主要功能 2 二.系统需求 3 三.文件名要求 3 四.目录说明: 4 1.Exc ...
- vs code设置保存时自动将CRLF 转换成 LF
1.下载vs code插件:EditorConfig for VS Code 2.在项目目录下新建文件:.editorconfig 3.在文件中添加以下内容, 搞定 root = true [*] c ...
最新文章
- Python最热,PyTorch增速是TF的13倍:2019数据分析/机器学习工具调查发布
- pymysql dataframe 写入sql
- android getevent参数,android getevent、sendevent、input keyevent 使用说明
- intellij导入文件夹后各种红色cannot resolve symbol
- C# VS生成后事件命令行
- 存根类 测试代码 java_嘲弄和存根–了解Mockito的测试双打
- find()matlab,Matlab 之 find()函数
- caffe SigmoidCrossEntropyLossLayer
- Solving environment: failed with initial frozen solve.Retrying with flexible solve
- 为什么说《让子弹飞》是古今中外的神片
- 想要组装一台 RISC-V PC?试试这个 RISC-V 开发板
- Python爬取图片时,urllib提示没有属性urlretrieve的问题
- hadoop put命令的格式_hadoop Shell命令详解
- linux yum换源(国内阿里源)
- 百度主送推送是什么?
- P3369普通平衡树
- winsxs目录清理工具
- 4424: Cf19E Fairy
- 中国石油大学《微观经济学》第一次在线作业
- Powershell 添加开机启动项
热门文章
- Android开发日记(六)
- Eclipse与github整合完整版
- IOS之导航控制器与表视图
- Up or out!!!
- 207. Course Schedule
- 力扣 两数相加 指针操作注意事项
- 安装mysql5.6.10_windows下安装mysql(mysql-installer-community-5.6.10.1)详细教程
- python list存储方式_Python 之 将 list 存储为 .mat 文件
- java程序设计实验报告册_20145215《Java程序设计》实验一实验报告
- python网络通信框架_【python:flask-SocketIO】网络通信框架简单了解