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

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

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

技术栈

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

自动设置根节点htmlfont-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();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/88913.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

redis部署与管理

目录 一、关系数据库与非关系型数据库: 1. 关系型数据库: 2.非关系型数据库: 二、关系型数据库和非关系型数据库区别: (1)数据存储方式不同: (2)扩展方式不同&#xf…

libpcap抓包编程范式

一、源码构建libpcap库 1. 下载源码 wget https://www.tcpdump.org/release/libpcap-1.10.4.tar.gz2. 解压 tar xf libpcap-1.10.4.tar.gz3. 编译 cd libpcap-1.10.4 ./configure --prefix/opt/libpcap-1.10.4 make sudo make install二、编程 1. 打开抓包口 pcap_t * pc…

数据结构与算法基础-(3)

🌈write in front🌈 🧸大家好,我是Aileen🧸.希望你看完之后,能对你有所帮助,不足请指正!共同学习交流. 🆔本文由Aileen_0v0🧸 原创 CSDN首发🐒 如…

构造函数不能做为虚函数

引用:windows程序员面试指南 构造函数不能做为虚函数 从存储空间角度 虚函数对应一个虚函数表,这大家都知道,可是这个虚函数表其实是存储在对象的内存空间的。问题出来了,如果构造函数是虚的,就需要通过虚函数表来调…

洛谷P5661:公交换乘 ← CSP-J 2019 复赛第2题

【题目来源】https://www.luogu.com.cn/problem/P5661https://www.acwing.com/problem/content/1164/【题目描述】 著名旅游城市 B 市为了鼓励大家采用公共交通方式出行,推出了一种地铁换乘公交车的优惠方案: 1.在搭乘一次地铁后可以获得一张优惠票&…

C# Modbus 通讯

前言 Modbus通讯是最常用的硬件通讯协调,我PLC接触的不多。Modbus保证了简单又高效的数据传输。 Modbus协议简单介绍 Modbus简单介绍 Modbus Poll和Modbus Slave 软件下载:必须下载 NModbus 一般带N开头的都是.NET平台移植版本。比如NLog&#xff…

【计算机网络】DNS原理介绍

文章目录 DNS提供的服务DNS的工作机理DNS查询过程DNS缓存 DNS记录和报文DNS记录DNS报文针对DNS服务的攻击 DNS提供的服务 DNS,即域名系统(Domain Name System) 提供的服务 一种实现从主机名到IP地址转换的目录服务,为Internet上的用户应用程序以及其他…

Pycharm在进行debug时出现collecting data如何解决?

Pycharm在进行debug时变量界面出现collecting data,问题如下: 解决方法:打开Setting界面,在Python Debugger选项中勾选下图中的Gevent compatible即可。

初识ebpf

介绍eBPF技术 当代计算机系统中,性能、安全性和可观察性是至关重要的关键因素。为了应对这些挑战,Linux 内核引入了一种名为eBPF(extended Berkeley Packet Filter)的强大技术。eBPF 不仅仅是一种网络数据包过滤器,它…

笔记1-2:

一、磁荷与磁流的引入 麦克斯韦方程组: 引入磁荷和磁流的概念,上述方程可以写成对称形式: 磁荷和磁流实际上不存在,只具有某种等效意义,可以把某个区域中的电磁场看成是由一组等效磁型源所产生。 对于均匀和各向同性…

gpt扣款失败,openai扣款失败无法使用-如何解决gpt扣款失败的问题?

gpt扣款失败,openai扣款失败无法使用。毕竟你花了钱却无法使用你所期待的服务,这种情况确实令人不快。但是, 为什么gpt扣款失败? 可能是由于支付问题导致的扣款失败。这包括信用卡额度不足、支付信息错误等等。如果你的支付信息…

DolphinDB x 龙蜥社区,打造多样化的数据底座

近日,浙江智臾科技有限公司(以下简称“DolphinDB”)正式签署 CLA 贡献者许可协议,加入龙蜥社区(OpenAnolis)。 DolphinDB 主创团队从 2012 年开始投入研发产品。作为一款基于高性能时序数据库,D…

LeetCode 1194.锦标赛优胜者

数据准备 Create table If Not Exists Players (player_id int, group_id int); Create table If Not Exists Matches (match_id int, first_player int, second_player int, first_score int, second_score int); Truncate table Players; insert into Players (player_id, g…

9+铜死亡+缺氧+分型+单细胞+实验生信思路

今天给同学们分享一篇铜死亡缺氧分型实验的生信文章“Unraveling Colorectal Cancer and Pan-cancer Immune Heterogeneity and Synthetic Therapy Response Using Cuproptosis and Hypoxia Regulators by Multi-omic Analysis and Experimental Validation”,这篇文…

ElasticSearch深度分页解决方案

文章目录 概要ElasticSearch介绍es分页方法es分页性能对比表方案对比 From/Size参数深度分页问题Scroll#性能对比向前翻页 总结个人思考 概要 好久没更新文章了,最近研究了一下es的深分页解决方案。和大家分享一下,祝大家国庆节快乐。 ElasticSearch介…

WorkPlus Meet:高效私有音视频会议,助力多场景协作

在当今数字化时代,远程协作和在线教育需求不断增长,企业和教育机构需要可靠的音视频会议工具来满足各种场景的需求。WorkPlus Meet,作为一款私有化音视频会议软件,强大而多功能,为用户提供了流畅的百人会议、实时协作、…

firefox_dev_linux下载安装配置(部分系统自带包请看结尾)

download 从 Firefox 的官方网站下载 Firefox Developer Edition 的 tar 文件 firefox_dev_linux_download # 终端快速下载 wget https://download.mozilla.org/?productfirefox-devedition-latest-ssl&oslinux64&langen-US彻底删除自带原版 # apt系 sudo apt --pu…

SpringBoot之异常处理

文章目录 前言一、默认规则二、定制异常处理处理自定义错误页面ControllerAdviceExceptionHandler处理全局异常ResponseStatus自定义异常自定义实现 HandlerExceptionResolver 处理异常 三、异常处理自动配置原理四、异常处理流程总结 前言 包含SpringBoot默认处理规则、如何定…

ubuntu x86_64 源码编译 rust 1.48.0

源码地址 GitHub - rust-lang/rust: Empowering everyone to build reliable and efficient software. git clone https://github.com/rust-lang/rust cd rust git checkout 1.48.0 ./configure ./x.py build 安装前执行cargo vendor yeqiangyeqiang-MS-7B23:~/Downloads/sr…

数据备份文件生成--根据表名生成对应的sql语句文件

最近客户有个需求,希望在后台增加手动备份功能,将数据导出下载保存。 当然,此方法不适用于海量数据的备份,这只适用于少量数据的sql备份。 这是我生成的sql文件,以及sql文件里的insert语句,已亲测&#x…