vue px转换为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、修改根目录 .postcssrc.js
文件
找到 plugins
属性新增pxtorem的设置
"postcss-pxtorem": {
"rootValue": 32,
"propList": ["*"]
}
按照上述配置项目后,即可在开发中直接使用 px
单位开发。
例如设计给出的设计图是 750 * 1136,那么可以直接在页面中写
body {
width: 750px;
height: 1136px;
}
将被转换为
body {
widht: 23.4375rem;
height: 35.5rem;
}
注意:此方法支持import
和 .vue
单文件中style
。暂不支持style
中使用@import url();
转载自:
大灰狼的小绵羊哥哥的博客
原文链接:https://blog.csdn.net/sinat_17775997/article/details/79230616
vue px转换为rem的更多相关文章
- vue px 转rem
来自:https://www.cnblogs.com/wangqiao170/p/8652505.html 侵 删 每一个认真生活的人,都值得被认真对待 vue px转换为rem 前端开发中还原设 ...
- vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
- px-rem px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...
- px-rem 一个将px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...
- SublimeText插件cssrem : px转换为rem
步骤: 下载插件: https://github.com/flashlizi/cssrem 安装插件: 打开:Sublime Text 点击: Preferences 选择: Browse Packa ...
- Vue项目中自动将px转换为rem
一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...
- vue项目使用webpack loader把px转换为rem
下载lib-flexible https://github.com/amfe/lib-flexible npm i lib-flexible --save 在main.js中引入lib-flexibl ...
- vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐 postcss-plugin-px2r ...
- Sublime Text中安装插件来实现px与rem间的换算
今天在群里无意中看到了群友分享的一篇关于移动端的文章.里面其他内容我倒不大感兴趣,反而是rem让我提起了兴趣. 首先来谈一下rem,rem是CSS3中新增加的一个单位值,它和em单位一样,都是一个相对 ...
随机推荐
- 初学spring boot 一
建立maven项目,在prom.xml中导入依赖 <parent> <groupId>org.springframework.boot</groupId> < ...
- Java (JDK 多版本切换)—— Windows平台
0. 背景 常常在不同的应用中需要用到不同版本的Java ,需要切换不同JAVA_HOME. 1. 方法 Step 1. 安装不同版本的JDK(JRE),最好都安装在一个Java目录分支下.例如: S ...
- [Swift]LeetCode212. 单词搜索 II | Word Search II
Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...
- [Swift]LeetCode281. 之字形迭代器 $ Zigzag Iterator
Given two 1d vectors, implement an iterator to return their elements alternately. For example, given ...
- [Swift]LeetCode738. 单调递增的数字 | Monotone Increasing Digits
Given a non-negative integer N, find the largest number that is less than or equal to Nwith monotone ...
- [Swift]LeetCode822. 翻转卡片游戏 | Card Flipping Game
On a table are N cards, with a positive integer printed on the front and back of each card (possibly ...
- IP地址个数的计算原理
IP注释: IP地址(Internet Protocol Address),缩写为IP Adress,是一种在Internet上的给主机统一编址的地址格式,也称为网络协议(IP协议)地址. 它为互联网 ...
- 第一次c语言上机
实验结论 part1: 第一部分的内容是按照书上所给的例题,进行简单的验证.虽然听起来很简单,但是由于之前并未接触过这方面的内容,还是犯了很多微小的错误.主要是在进行编程语言的输入时会输错字母,会忘记 ...
- 【Storm篇】--Storm从初始到分布式搭建
一.前述 Storm是一个流式处理框架,相比较于SparkStreaming是一个微批处理框架,hadoop是一个批处理框架. 二 .搭建流程 1.集群规划 Nimbus Supervisor ...
- Java集合类的那点通俗的认知
文/沉默王二 开门见山地说吧,Java提供了一套完整的集合类(也可以叫做容器类)来管理一组长度可变的对象(也就是集合的元素),其中常见的类型包括List.Set.Queue和Map.从我个人的编程经验 ...