在vue项目中将px自动成rem
第一步:
在vue项目中的src文件夹下面创建一个config文件夹,在里面创建一个rem.js文件
第二步:将下面代码复制到rem.js中
// 基准大小
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()
}
第三步:在 src 文件夹下的 main.js 中引入
import './config/rem'
第四步:在 Vue 项目根目录终端引入
下载:npm install postcss-pxtorem -D
第五步:在 Vue 项目文件夹下的 postcss.config.js 中加入
module.exports = {plugins: {autoprefixer: {},"postcss-pxtorem": {"rootValue": 16,"propList": ["*"]}}
}这样vue项目就可以自动转换成rem了!!!!
在vue项目中将px自动成rem相关推荐
- Vue项目中将时间格式成xxxx-xx-xx
一.将标准时间格式化成xxxx-xx-xx 题:Sun Jul 05 2020 11:08:57 GMT+0800 (中国标准时间) 答: js:computed:{time:function () ...
- css自动转rem,css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
- vue项目全局把px转换成rem
vue项目全局把px转换成rem 首先vscode要有px to rem插件 1.vue.config.js 在vue.config.js中配置 css: {...// css预设器配置loaderO ...
- vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw
作为一名前端开发,在做移动端适配时rem.vw是我们经常用到的单位,但是我们在实际开发过程中需要将设计稿上的px转换成rem,如果手动去计算,将是一个很耗时.费力的过程.这是就需要一个工具可以帮我们自 ...
- vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录 将动态改变的视频链接分享至推特,并希望能直接在推特上播放视频的需求实现方法及踩坑记录 如果只要将文本或链接分享到推特,不需要推特识别图片/视频等媒 ...
- postcss-pxtorem无法将内联样式的px转成rem
在开发移动端项目,发现postcss-pxtorem无法将内联样式的px转成rem,这是一个非常致命的缺点.因为在开发项目时,经常会设置内联样式,那如何解决这个问题呢? 一.场景再现: 我以vue2项 ...
- [vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗?
[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗? 自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plug ...
- cssrem转换工具_css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了. 但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程 ...
- Vue进阶(幺陆叁):vue项目启动后自动打开页面并设置默认浏览器
文章目录 一.修改默认浏览器 二.vue 项目启动自动打开页面 三.拓展阅读 以windows 系统为例,操作方法如下: 一.修改默认浏览器 设置谷歌浏览器为默认浏览器. 1.首先打开"开始 ...
最新文章
- Go 分布式学习利器(18)-- Go并发编程之lock+WaitGroup实现线程安全
- 运动会加油稿计算机学院150字,大学运动会加油稿150字左右
- 《AOSuite 开发手册》之AOSuite 服务端开发
- JS中try....catch
- BugKuCTF WEB 头等舱
- 第4章 Python 数字图像处理(DIP) - 频率域滤波10 - 使用低通频率域滤波器平滑图像 - 理想、高斯、巴特沃斯低通滤波器
- sqlplus / as sysdba 提示权限不足(ORA-01031)问题处理
- 计算机能帮助我学英语翻译,英语翻译以下几个句子,帮忙把汉语翻译成英语,请不要用软件翻!1、计算机能帮助人们从事复杂的计算.几十年前可能需要数月完成...
- 伯克利:serverless是下一代计算范式
- Dr Robot 2015.6—7月
- 一路PN码串行捕获设计--基于《通信收发信机的verilog实现与仿真》实例
- AdminLTE-2.4.10源码包
- UReport2初体验
- matlab信道编码程序,信道编码作业matlab.doc
- linux的磁盘busy,Linux umount 报 device is busy 的处理方法
- sklearn的roc_curve()函数分析
- 仓库系统用什么服务器,什么是仓库管理saas系统 仓库管理saas系统的功能有哪些...
- windows os x linux比较,windows、Linux与OS X相比,哪个系统更适合写代码?
- excel2010将数字变成以文本存储的数字
- launch计算机上哪个初中,这位妈妈10年夏校经验告诉你:小学初中高中都该如何选择夏校?...
热门文章
- 怎么购买虚拟服务器账号,虚拟主机购买流程_购买的虚拟主机怎么开通
- 快速查询德邦物流信息,并标记未签收单号
- 直播预告:欧特克传媒娱乐行业2022新产品在线发布会
- android获得application类对象,android之Application类介绍
- 数字化需要授之以渔,Azure 动手实验营在等你
- 玩转开发板--常见的tftp网络下载错误归纳以及注意事项
- android获取屏幕宽度、高度
- java保留关键字意思_Java关键字和保留字及其含义
- ESP32-C3 学习测试 蓝牙 篇(四、GATT Server 示例解析)
- 【基础入门题055】埃及分数