Vue项目中通过插件pxtorem实现大屏响应式
一、原理
rem单位代表的是根节点的font-size大小,所以当我们在页面上使用rem去替代px的时候,就可以通过修改根节点font-size的值,动态地让页面上的元素根据不同浏览器宽高下去实现变化。
二、工具
1.postcss-pxtorem
作用:在编译打包代码的时候,帮助我们把页面上的px单位转化为rem单位。因为设计图一般是给一个固定的尺寸,所有元素都统一以px为单位提供,所以一般情况下我们为了尽可能还原设计图,都一一对应地按同样的数值去实现页面,最后为了高效率自动化地将对应的px都转化为rem,所以我们必须使用这款插件。
依赖:使用该插件所需要的几个依赖。
2.flexible.js
作用:根据浏览器的可视窗口大小,动态地去设置根节点font-size的值,也就是rem的基准值。实现各元素根据不同屏幕大小与设计图的宽高比例进行动态地放大缩小。
(function (win, lib) {var doc = win.documentvar docEl = doc.documentElementvar metaEl = doc.querySelector('meta[name="viewport"]')var flexibleEl = doc.querySelector('meta[name="flexible"]')var dpr = 0var scale = 0var tidvar flexible = lib.flexible || (lib.flexible = {})if (metaEl) {console.warn('将根据已有的meta标签来设置缩放比例')var match = metaEl.getAttribute('content')// eslint-disable-next-line no-useless-escape.match(/initial\-scale=([\d\.]+)/)if (match) {scale = parseFloat(match[1])dpr = parseInt(1 / scale)}} else if (flexibleEl) {var content = flexibleEl.getAttribute('content')if (content) {// eslint-disable-next-line no-useless-escapevar initialDpr = content.match(/initial\-dpr=([\d\.]+)/)// eslint-disable-next-line no-useless-escapevar maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)if (initialDpr) {dpr = parseFloat(initialDpr[1])scale = parseFloat((1 / dpr).toFixed(2))}if (maximumDpr) {dpr = parseFloat(maximumDpr[1])scale = parseFloat((1 / dpr).toFixed(2))}}}if (!dpr && !scale) {// var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi)var devicePixelRatio = win.devicePixelRatioif (isIPhone) {// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {dpr = 3} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {dpr = 2} else {dpr = 1}} else {// 其他设备下,仍旧使用1倍的方案dpr = 1}scale = 1 / dpr}docEl.setAttribute('data-dpr', dpr)if (!metaEl) {metaEl = doc.createElement('meta')metaEl.setAttribute('name', 'viewport')metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl)} else {var wrap = doc.createElement('div')wrap.appendChild(metaEl)doc.write(wrap.innerHTML)}}function refreshRem() {var width = docEl.getBoundingClientRect().widthif (width / dpr > 540) {width = width * dpr}var rem = width / 10docEl.style.fontSize = rem + 'px'flexible.rem = win.rem = rem}win.addEventListener('resize',function () {clearTimeout(tid)tid = setTimeout(refreshRem, 300)},false)win.addEventListener('pageshow',function (e) {if (e.persisted) {clearTimeout(tid)tid = setTimeout(refreshRem, 300)}},false)if (doc.readyState === 'complete') {doc.body.style.fontSize = 12 * dpr + 'px'} else {doc.addEventListener('DOMContentLoaded',function () {doc.body.style.fontSize = 12 * dpr + 'px'},false)}refreshRem()flexible.dpr = win.dpr = dprflexible.refreshRem = refreshRemflexible.rem2px = function (d) {var val = parseFloat(d) * this.remif (typeof d === 'string' && d.match(/rem$/)) {val += 'px'}return val}flexible.px2rem = function (d) {var val = parseFloat(d) / this.remif (typeof d === 'string' && d.match(/px$/)) {val += 'rem'}return val}
})(window, window['lib'] || (window['lib'] = {}))
三、实现方式
把以上工具都准备好之后,便可以通过以下的方式在项目中实现响应式。
1.首先是postcss-pxtorem,当我们把依赖写进package.json之后,只需要npm install便可以将所需插件代码安装到项目当中。最后在项目根目录中创建**.postcss.js**文件,填写以下内容即可全局转化px单位。
可以看到以下得代码中,只有一行关键的配置,那就是rootValue这个参数。我们应该按照根目录结点的font-size值去填写该值,一般情况下配置flexible插件,这个值就是将设计图的分辨率/10得出来的结果。
// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = {"plugins": {"postcss-import": {},"postcss-url": {},// to edit target browsers: use "browserslist" field in package.json'autoprefixer': {},'postcss-pxtorem': {rootValue: 136.6,}}
}
2.第二步在main.js全局引入flexible.js文件,全局监听屏幕宽高,动态设置根结点font-size大小。
main.js
import '@/utils/flexible'
3.设置完前面两步,在写页面的时候只需要按照设计图的尺寸去编写页面。
四、问题
如果需要设置特定的文件夹目录下的文件,则需要在postcss.js中添加正则代码。以下方式是可以设置让pxtorem作用到某个具体的文件夹。需要注意的是这种方式只使用与pxtorem插件,像px2rem这种类似的插件是没有这个功能的。
// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = {'postcss-pxtorem': {rootValue: 136.6,propList: ['*'],// 需要过滤掉后台的所有页面,单独对前台的页面进行单位转换exclude: (e) => {if (/src(\\|\/)workplace/i.test(e)){return false}return true},}}
}
相关文章:

Vue项目中通过插件pxtorem实现大屏响应式
一、原理 rem单位代表的是根节点的font-size大小,所以当我们在页面上使用rem去替代px的时候,就可以通过修改根节点font-size的值,动态地让页面上的元素根据不同浏览器宽高下去实现变化。 二、工具 1.postcss-pxtorem 作用:在编…...

(Django)初步使用
前言 Django 是一个功能强大、架构良好、安全可靠的 Python Web 框架,适用于各种规模的项目开发。它的高效开发、数据库支持、安全性、良好的架构设计以及活跃的社区和丰富的文档,使得它成为众多开发者的首选框架。 目录 安装 应用场景 良好的架构设计…...

【星汇极客】单片机竞赛之2024睿抗机器人大赛-火线速递赛道(持续更新)
前言 本人是一名嵌入式学习者,在大学期间也参加了不少的竞赛并获奖,包括但不限于:江苏省电子设计竞赛省一、睿抗机器人国二、中国高校智能机器人国二、嵌入式设计竞赛国三、光电设计竞赛国三、节能减排竞赛国三。 后面会经常写一下博客&…...

生信科研,教授(优青)团队一站式指导:高通量测序技术--农业植物基因组分析、组蛋白甲基化修饰、DNA亲和纯化测序、赖氨酸甲基化
组蛋白甲基化修饰工具(H3K4me3 ChIP-seq) 组蛋白甲基化类型也有很多种,包括赖氨酸甲基化位点H3K4、H3K9、H3K27、H3K36、H3K79和H4K20等。组蛋白H3第4位赖氨酸的甲基化修饰(H3K4)在进化上高度保守,是被研究最多的组蛋白修饰之一。 DNA亲和纯化测序 DNA亲…...

【Immich部署与访问】自托管媒体文件备份服务 Immich 本地化部署与远程访问存储数据
文章目录 前言1.关于Immich2.安装Docker3.本地部署Immich4.Immich体验5.安装cpolar内网穿透6.创建远程链接公网地址7.使用固定公网地址远程访问 前言 本篇文章介绍如何在本地搭建lmmich图片管理软件,并结合cpolar内网穿透实现公网远程访问到局域网内的lmmich&#…...

AI少女/HS2甜心选择2 仿逆水寒人物卡全合集打包
内含AI少女/甜心选择2 仿逆水寒角色卡全合集打包共6张 内含:白灵雪魅落霞飞雁君临华歌白君临华歌黑平野星罗晚香幽韵 下载地址: https://www.51888w.com/436.html 部分演示图:...

C/C++逆向:数据类型识别
在逆向工程中,数据类型识别是理解程序逻辑的重要步骤,因为它直接影响对程序逻辑和功能的理解,识别出数据类型有助于确定变量的含义和函数的行为。在分析恶意软件或者寻找安全漏洞时,识别数据类型能够帮助发现代码中的潜在问题。例…...

PASCAL VOC 2012数据集 20类物体,这些物体包括人、动物(如猫、狗、鸟等)、交通工具(如车、船、飞机等)以及家具(如椅子、桌子、沙发等)。
VOC2012数据集是PASCAL VOC挑战赛官方使用的数据集之一,主要包含20类物体,这些物体包括人、动物(如猫、狗、鸟等)、交通工具(如车、船、飞机等)以及家具(如椅子、桌子、沙发等)。每个…...
题目:最左边的数字
问题 - 1060 (hdu.edu.cn) 解题思路: 数字很大,使用科学计数法。则,我们需要的是a的整数位,最终求出a即可。 取对数:nlgnmlga,移项:lganlgn-m,接下来我们需要求m。 …...

第 4 章 Spring IoC容器之BeanFactory
Spring 的 IoC 容器是一个提供 IoC 支持的轻量级容器,除了基本的 IoC 支持,它作为轻量级容器还提供了 IoC 之外的支持。 Spring 提供了两种容器类型:BeanFactory 和 ApplicationContext: BeanFactory,基础类型 IoC 容…...
滚雪球学Oracle[2.3讲]:Oracle Listener配置与管理
全文目录: 前言一、Oracle Listener的基础概念1.1 什么是Oracle Listener?Listener的作用: 1.2 Oracle Listener的配置文件示例listener.ora配置文件: 1.3 启动与管理Listener 二、多Listener配置与负载分担2.1 多Listener的应用场…...

免费送源码:Javaspringboot++MySQL springboot 社区互助服务管理系统小程序 计算机毕业设计原创定制
摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受居民的喜爱,社区互助服务管理系统小程序被居民普遍使用,为…...

成都睿明智科技有限公司抖音电商新蓝海的领航者
在当今这个数字化浪潮汹涌的时代,电商行业正以惊人的速度迭代升级,而抖音电商作为新兴势力,更是凭借其庞大的用户基数、精准的算法推荐和高度互动的社区氛围,成为了众多商家竞相追逐的蓝海市场。在这片充满机遇与挑战的海洋中&…...

不可错过!CMU最新《生成式人工智能大模型》课程:从文本、图像到多模态大模型
1. 课程简介 从生成图像和文本到生成音乐和艺术,生成模型一直是人工智能的关键挑战之一。本课程将探讨推动生成模型和基础模型(Foundation Models)最近进展的机器学习和人工智能技术。学生将学习、开发并应用最先进的算法,使机器…...

重庆数字孪生工业互联网可视化技术,赋能新型工业化智能制造工厂
重庆作为西南地区的重要工业基地,正积极探索和实践数字孪生、工业互联网及可视化技术在智能制造领域的深度融合,致力于打造新型工业化智能制造工厂,为制造业的高质量发展注入强劲动力。 在重庆的智能制造工厂中,数字孪生技术被广…...
Qt QPushButton clicked信号浅析
前言 Qt 的 QPushButton clicked 信号原型: void clicked(bool checked false);通常,使用 Qt 的 QPushButton clicked 点击信号时,会以如下方式使用: connect(ui->pushButton, &QPushButton::clicked, this, [](){qDeb…...
Python时间戳转日期
在Python中,你可以使用datetime模块将时间戳转换为日期。时间戳通常是一个表示自1970年1月1日(UTC)以来的秒数的浮点数或整数。 以下是一个简单的示例,展示了如何将时间戳转换为日期和时间: import datetime# 示例时…...

对 LLM 工具使用进行统一
我们为 LLM 确立了一个跨模型的 统一工具调用 API。有了它,你就可以在不同的模型上使用相同的代码,在 [Mistral] 或 [Llama]) 等模型间自由切换,而无需或很少需要根据模型更改工具调用相关的代码。此外,我们还在 transformers 中新…...
webpack/vite的区别
Webpack和Vite都是前端开发中常用的构建工具,它们在多个方面存在显著的区别。以下是对这两个构建工具的详细比较: 一、基础概念与定位 Webpack Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。它允许开发…...

【笔记】信度检验
一、信度 信度是指测量结果的一致性和稳定性。 1.一致性(Consistency) 一致性指的是测量工具内部各个部分或项目之间的协调一致程度。高一致性意味着测量工具的不同部分都在测量同一个概念或特质。 例子:智力测试 假设我们有一个包含100…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...

Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...

uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...