当前位置: 首页 > news >正文

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…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...

【Oracle APEX开发小技巧12】

有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

Mac软件卸载指南,简单易懂!

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

【Oracle】分区表

个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中,其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下: 初始判断与哈希计算: 首先,putVal 方法会检查当前的 table(也就…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

Kafka主题运维全指南:从基础配置到故障处理

#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...