Vue项目自动转换 px 为 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": ["*"],// 注意:如果有使用第三方UI如VUX,则需要配置下忽略选择器不转换。// 规则是class中包含的字符串,如vux中所有的class前缀都是weui-。也可以是正则。"selectorBlackList": ["weui-"] }
按照上述配置项目后,即可在开发中直接使用 px
单位开发。
例如设计给出的设计图是 750 * 1136,那么可以直接在页面中写
body {width: 750px;height: 1136px;
}
将被转换为
body {widht: 23.4375rem;height: 35.5rem;
}
注意:此方法支持import
和 .vue
单文件中style
。暂不支持style
中使用@import url();
作者:猪不乐意
链接:https://juejin.im/post/5a716c4c6fb9a01cb42cac4b
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
转载于:https://www.cnblogs.com/yuerdong/p/8427807.html
Vue项目自动转换 px 为 rem,高保真还原设计图相关推荐
- vue项目全局把px转换成rem
vue项目全局把px转换成rem 首先vscode要有px to rem插件 1.vue.config.js 在vue.config.js中配置 css: {...// css预设器配置loaderO ...
- Vue项目中自动将px转换为rem
一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...
- vue引入postcss-plugin-px2rem,px转rem
npm install --save-dev postcss-plugin-px2rem vue.config.js module.exports = {css: {loaderOptions: {p ...
- jenkins+阿里code配置vue项目自动部署
1.jenkins是什么? Jenkins是一个开源的.提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续.自动的构建/测试软件项目.监控外部任务的运行( ...
- 适配移动端配置px2rem(自动将px转rem)
vue配置px2rem 1.安装 npm install px2rem-loader lib-flexible –save 2.在项目入口文件main.js中引入lib-flexible import ...
- Vue项目自动部署之一、阿里云Linux服务器、域名购买和使用
购买阿里云Linux服务器 如果已有服务器请直接跳转到[传统部署方式] 登录阿里云,访问 云服务器 ECS 购买地址:https://ecs-buy.aliyun.com/ 也可从首页导航菜单进入. ...
- Vue项目自动部署【精简版】NuxtJS + GitHub Actions + Linux 自动部署学习(包含阿里云Linux ECS购买过程、传统部署流程、pm2、Github Actions)
购买阿里云Linux服务器 如果已有服务器请直接跳转到[传统部署方式] 登录阿里云,访问 云服务器 ECS 购买地址:https://ecs-buy.aliyun.com/ 也可从首页导航菜单进入. ...
- 使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0
在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem postcss-plugin-px2rem优势: 因为 postcs ...
- 将已写好页面的px转化为rem(px to rem)
将已写好页面的px转化为rem(px to rem) 1.px/rem单位 px:pixel的缩写,像素的意思 rem : 是一个相对单位,1rem等于根元素的font-size值 2.为什么要实现p ...
最新文章
- liunx学习笔记(一:常用命令)
- Windows核心编程 第十九章 DLL基础
- OpenGL raytracer光线追踪的实例
- JavaScript练习笔记
- npm 安装less插件_node+npm+webpack+less安装
- java自定义tag,tag文件与tag标记,java自定义标签
- java执行脚本命令(shell脚本或cmd脚本)
- 实训三:交换机恢复出厂设置以及基本配置
- [笔记]Windows核心编程《十七》内存映射文件
- XX公司的薪酬设计案例分析
- 使用Hbase Shell和Java API分别进行Hbase的增删改查操作
- python创建一个简单的游戏
- 【虚拟仿真】Unity3D中实现UI跟随3D模型旋转移动、UI一直面朝屏幕
- 2020年4大安全会议及论文
- KFC肯德基带给孩子的危害(转)
- java 周次_JAVA计算学校学期周次
- 2017-10-23学大伟业Day1
- GitLab安装到实战
- springboot项目搭建0051-通用mapper使用mapper.xml
- 使用jasypt加密解密
热门文章
- 连自己都不放过?六成应用开发不需要程序员!
- Oracle已从2019年1月起收取Java费用
- 高质量程序程序设计指南摘录
- 神鬼传奇小技巧:教你如何修改自己想要的时装
- 前端面试回顾(1)---javascript的面向对象
- SQL Server Management Studio 2012 设置脚本默认保存路径
- ASP.NET-FineUI开发实践-14
- 【Open Search产品评测】-- 淘点点:基于OpenSearch,轻松实现一整套O2O类
- 网页调用本地播放器的代码支持ie,chroome, 火狐不支持
- RTEMS文件系统(4):系统调用开发信息(上)