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

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

技术栈

  • vue-cli:使用脚手架工具创建项目。
  • postcss-pxtorem:转换px为rem的插件。

自动设置根节点htmlfont-size

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

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

1、创建rem.js文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 基准大小
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

1
import './utils/rem'

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

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

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

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

1、安装 postcss-pxtorem

1
$ npm install postcss-pxtorem -D

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

找到 postcssLoader 的代码块

1
2
3
4
5
6
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}

修改为:

1
2
3
4
5
6
7
8
9
10
11
12
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap,
plugins: [
require('postcss-pxtorem')({
'rootValue': 32,
propList: ['*']
})
]
}
}

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

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

1
2
3
4
body {
width: 750px;
height: 1136px;
}

将被转换为

1
2
3
4
body {
widht: 23.4375rem;
height: 35.5rem;
}

—End—

【转载】Vue项目自动转换 px 为 rem,高保真还原设计图的更多相关文章

  1. Vue项目自动转换 px 为 rem,高保真还原设计图

    技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通 ...

  2. vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;

    如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐  postcss-plugin-px2r ...

  3. Vue项目中自动将px转换为rem

    一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...

  4. Jenkins Vue项目自动构建以及构建后续操作

    Jenkins在linux上的安装教程:http://www.ityouknow.com/springboot/2017/11/11/springboot-jenkins.html 另外,关于在win ...

  5. 如何在输入命令行npm run dev 之后vue项目自动在浏览器打开

    使用代码编辑器打开vue项目代码,在config文件夹里面找到index.js 将里面的:autoOpenBrowser: false, 修改为 :autoOpenBrowser: true, 这个方 ...

  6. <转载> VUE项目中CSS管理

    vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...

  7. HBuilderX中自动转换px为upx

    uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应.uni-app 规定屏幕基准宽度750upx.但如果设计稿不是750px,那换算单位可头疼 ...

  8. vue项目自动构建工具1.0,支持多页面构建

    该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处.对于多页面开发,也是相当便利,不用手动撸entry和plugin. git: ...

  9. vue项目中引入vant 使用rem布局问题

    postcss.config.js const autoprefixer = require('autoprefixer') const pxtorem = require('postcss-pxto ...

随机推荐

  1. BZOJ 4576: [Usaco2016 Open]262144

    Description 一个序列,每次可以将两个相同的数合成一个数,价值+1,求最后最大价值 \(n \leqslant 262144\) Sol DP. 这道题是 BZOJ 4580: [Usaco ...

  2. Jenkins Job 自杀 groovy

    下面的groovy可以加在post groovy script里面在job跑完的时候自杀(把本Job删掉) suicide_url="http://[USER]:[PASSWORD]@[JE ...

  3. zabbix监控系统客户端安装

    原文:http://blog.chinaunix.net/uid-25266990-id-3387002.html 测试使用agentd监听获取数据. 服务端的安装可以查看http://blog.ch ...

  4. Android PagerAdapter的用法

    转http://blog.csdn.net/look85/article/details/8563906 在写这个之前,真心需要吐槽一下…关于Android开发中,PageAdapter的用法在网上能 ...

  5. openstack项目【day23】:keystone组件基础

    本节内容 一 什么是keystone 二 为何要有keystone 三 keystone的功能 四 keystone概念详解 五 keystone内包含的组件 六 keystone与openstack ...

  6. 【Java】JDK/JVM相关工具

    1.JDK自带工具 1)常见的用法参见:https://cloud.tencent.com/developer/article/1379487 2)HSDB,即Hotspot debugger,位置在 ...

  7. Java开发环境配置(1)--tool准备

    工具准备:1.eclipse-mars开发工具必须安装 2.XAMPP-环境集成了MYSQL,APACHE,TOMCAT建议安装 3.TOMCAT提供了二个版本(8.0和9.0),建议安装一个以备不时 ...

  8. 2018年湘潭大学程序设计竞赛G又见斐波那契

    链接:https://www.nowcoder.com/acm/contest/105/G来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536 ...

  9. 初学 python 之 用户登录实现过程

    要求编写登录接口 : 1. 输入用户名和密码 2.认证成功后显示欢迎信息 3.用户名输错,提示用户不存在,重新输入(5次错误,提示尝试次数过多,退出程序) 4.用户名正确,密码错误,提示密码错误,重新 ...

  10. MaxScript调用DotNet时命名空间的问题

    Fn GetSpecialFolder argEnumName = (DotNetClass "System.Environment").GetFolderPath (Execut ...