Vue项目自动转换 px 为 rem的实现方法


Posted in Javascript onOctober 29, 2018

前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换。

而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem。

技术栈

vue-cli:使用脚手架工具创建项目。

postcss-pxtorem:转换px为rem的插件。

自动设置根节点html的font-size

因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的改变rem的大小。

原理网上有很多文章分享,这里不具体解释。

1、创建rem.js文件

很多人写这种小工具文件会习惯性的加上闭包,这个其实是没有必要的。ES6中每个文件都是单独的一个模块。

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
 // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
 setRem()
}

2、在main.js中引入rem.js

import './utils/rem'

引入文件后,查看页面的html节点,是否有被自动添加 font-size。

注意:完成到这一步,也就是实现了rem布局,实际开发的时候,还是需要我们去计算对应的rem值去开发。

下一步我们就配置一下webpack,自动转换px为对应的rem值。

配置 postcss-pxtorem 自动转换px为rem

1、安装 postcss-pxtorem

$ npm install postcss-pxtorem -D

2、修改 /build/utils.js 文件

找到 postcssLoader 的代码块

const postcssLoader = {
 loader: 'postcss-loader',
 options: {
  sourceMap: options.sourceMap
 }
}

修改为:

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
   sourceMap: options.sourceMap,
   plugins: [
    require('postcss-pxtorem')({
     'rootValue': 32,
     propList: ['*']
    })
   ]
 }
}

按照上述配置项目后,即可在开发中直接使用 px 单位开发。

例如设计给出的设计图是 750 * 1136,那么可以直接在页面中写

body {
 width: 750px;
 height: 1136px;
}

将被转换为

body {
 widht: 23.4375rem;
 height: 35.5rem;
}

总结

以上所述是小编给大家介绍的Vue项目自动转换 px 为 rem的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 #Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 #Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 #Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 #Javascript
简单说说angular.json文件的使用
Oct 29 #Javascript
JS 实现获取验证码 倒计时功能
Oct 29 #Javascript
浅析微信扫码登录原理(小结)
Oct 29 #Javascript
You might like
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
一个tab标签切换效果代码
2009/03/27 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
js实现验证码功能
2020/07/24 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
详解flask入门模板引擎
2018/07/18 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
简历上的自我评价怎么写
2014/01/28 职场文书
小学教师办公室制度
2014/02/03 职场文书
四年级语文教学反思
2014/02/05 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
婚宴邀请函
2015/01/30 职场文书
大学生自我评价范文
2015/03/03 职场文书
2015年妇产科工作总结
2015/05/18 职场文书