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 相关文章推荐
基于jquery的滑动样例代码
Nov 20 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
企业门卫岗位职责
2013/12/12 职场文书
法制宣传日活动总结
2014/04/29 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript