欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > vue教程 >

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

来源:未知 ?? 时间:2018-11-04 14:49?作者:小飞侠

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

前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用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的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

支持AG亚游集团 www.meeetang.com

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

哪里区块链创业最活跃?北京上海广东浙江位居前四 华帝公布“退全款”进展:线上退卡 线下退款2087万 内马尔手术成功!已乘坐私人飞机返回巴西养伤 今天她们放假半天 这些福利很多人还不知道 黑白两辆捷豹挂相同牌照 警方扣留白色套牌车(图) 默克尔:德国不会参与对叙利亚可能的军事行动 退役选手当裁判明星可以吸粉 收入低很多不愿转型 印度力量收购生变:三队担忧梅赛德斯B队诞生 加密货币卷土重来?美媒:比特币价格突破8000美元 山东男篮热身赛封闭 鲁媒:劳森回归已基本没戏 特朗普炒掉蒂勒森后 提名的国务卿曾多次叫板中国 小德:状态欠佳找不到节奏 最大问题恐在于心理
鄂媒:武汉止步足协杯虽败犹荣 和中超过招是学习 国家发改委:粤港澳大湾区规划纲要很快就会出台 男子深夜公路狂丢石头被拦 夺枪杀警致1死2伤 辛德胡剑指南京世锦赛冠军 不想被挂上亚军标签 美政府已连续停摆三日 黄金上涨多头警惕美元反弹 重磅蓝战发力 港股急涨近400点报30589点逼近20… 曝詹皇对骑士管理层失望 他当经理绝不卖欧文 半岛局势和缓台海变成新\"火药桶\"?国台办回应 美国将投入几十亿美元扩大核能力 却要求别国弃核 曝阿森纳二股东甩卖股份 抢权克伦克失败落寞出局 这部电影票房超1.7亿元 刷新中国纪录电影纪录 北斗导航系统在交通运输业应用出专项规划
全国人大法律委员会拟更名 玉米期货维持偏强格局 日本有望六年来首超中国 成最大海外并购交易者 抢夺自动驾驶风口:多地密集发放路测牌照 任正非:新员工要辞职,就随TA吧! 比利时发生自杀式爆炸事件 男子在足球场中心自爆 美墨两国新增20多万人自杀 却和这个天气因素有关 爱奇艺拟赴美IPO:或难对标Netflix 是否重蹈优… 党报谈共享单车信用新规:呵护信用经济的每次进步 女生最吃香的十大职业 白手起家什么意思 未来10年最赚钱行业 怎样白手起家赚钱 AG亚游集团