vue使用postcss-pxtorem实现自适应

安装:

npm install  postcss-pxtorem  -D

vue.config.js文件设置:

  css: {loaderOptions: {scss: {additionalData: `@import "~element-ui/packages/theme-chalk/src/common/var.scss";@import"@/styles/variables.scss";`},postcss: {postcssOptions: {plugins: [require("postcss-pxtorem")({// 配置文档:https://www.npmjs.com/package/postcss-pxtoremrootValue: 16, // 根元素字体大小 16/1.25unitPrecision: 5, // 转换成rem后保留的小数点位数propList: ["*"], // 匹配CSS中的属性,* 代表启用所有属性// exclude: /(node_module)/, // 忽略一些文件,不进行转换,默认false,可以(reg)利用正则表达式排除某些文件夹的              方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值mediaQuery: false, //(布尔值)允许在媒体查询中转换pxminPixelValue: 1, // 设置要替换的最小像素值}),],},},}},

创建一个js文件,引入main.js文件

// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {// 当前页面宽度相对于 1920 宽的缩放比例,可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920;// 设置页面根节点字体大小,设置个最小值,避免字体太小let fontSize = Math.max(baseSize * Math.min(scale, 2) ,12) document.documentElement.style.fontSize = fontSize+"px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem();
};

在实际开发中,echarts组件也需要根据实际进行字体转换,在utils.js文件中创建方法

export function fontSize(res) {let clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return;// 此处的1920 为设计稿的宽度,记得修改!let fontSize = clientWidth / 1920;return res * fontSize;
}

使用,例如:

import {fontSize} from "@/utils/index.js"legend: {itemWidth: 6,itemGap: 20,x: "left",y: "top",textStyle: {fontSize: fontSize(14),color: "#666666",},},

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【Pytorch】9.torch.nn.MaxPool2d

什么是MaxPool2d 是对二维矩阵进行池化层下采样的方法 MaxPool2d的用法 相较于卷积层,多出来的参数为ceil_mode 这个参数代表,如果所剩的部分不够卷积核的大小,要不要进行池化操作 具体代码为 import torch import torchvision from torch …

计算机Java项目|springboot母婴商城系统

作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简…

使用 cloudflare 免费服务,搭建临时邮箱,无需暴露自己的真实邮箱地址,保护个人隐私

使用 cloudflare 免费服务,搭建临时邮箱 地址 在线演示 🌐Github地址 https://github.com/find-xposed-magisk/cloudflare_temp_email 功能/TODO Cloudflare D1 作为数据库 使用 Cloudflare Pages 部署前端 使用 Cloudflare Workers 部署后端 email 转…

【上海大学计算机组成原理实验报告】五、机器语言程序实验

一、实验目的 理解计算机执行程序的实际过程。 学习编制机器语言简单程序的方法。 二、实验原理 根据实验指导书的相关内容,指令的形式化表示是指采用一种规范化的符号系统,以更清晰、精确地描述和表示指令的逻辑功能和操作步骤。 汇编是一种编程语言…

类和对象的特性

1.检查错误。 代码&#xff1a; #include <iostream>using namespace std;class Time { private:/* data */ public:Time(/* args */);~Time();void set_time(void);void show_time(void);int hour;int minute;int sec; };Time::Time(/* args */) { }Time::~Time() { }T…

纯血鸿蒙APP实战开发——Web获取相机拍照图片案例

介绍 本示例介绍如何在HTML页面中拉起原生相机进行拍照&#xff0c;并获取返回的图片。 效果预览图 使用说明 点击HTML页面中的选择文件按钮&#xff0c;拉起原生相机进行拍照。完成拍照后&#xff0c;将图片在HTML的img标签中显示。 实现思路 添加Web组件&#xff0c;设置…

解决kali Linux2024无法获取动态IPv4地址(DHCP)解决方案

用root用户启动终端 进入根目录&#xff0c;选择配置文件 cd到根目录下/../etc/network找到interfaces文件 编辑interfaces文件 vi interfaces&#xff0c;编辑interfaces文件 输入如下命令 打开虚拟网络编辑器 选择虚拟机选项卡&#xff0c;编辑&#xff0c;打开虚拟网络编…

Unity 模拟放大镜局部放大UI 效果实现

UI 放大实现 RectTransformUtility.ScreenPointToLocalPointInRectangle(rectScale, eventData.position, eventData.pressEventCamera, out localPos); 使用IPointerDownHandler 获取鼠标点击时的有效负载&#xff0c;并将鼠标坐标转成对应的UI 坐标&#xff0c;rectScale 为…

GM812条码模块的产品说明

1 模块尺寸 引脚定义 (单位&#xff1a;mm) 接口定义&#xff1a;规格 1.25*6Pin 接口说明&#xff1a; a) UART 缺省波特率为 9600bps&#xff0c;数据格式&#xff1a;8 位数据位&#xff0c;1 位停止位&#xff0c;无校验位。 b) 如果上位机是 MCU&#xff08;3.3V&#x…

OpenHarmony 实战开发——ArkUI容器类API介绍

容器类&#xff0c;顾名思义就是存储的类&#xff0c;用于存储各种数据类型的元素&#xff0c;并具备一系列处理数据元素的方法。在 ArkUI 开发框架中&#xff0c;容器类采用了类似静态的语言来实现&#xff0c;并通过 NAPI 框架对外提供。通过对存储位置以及属性的限制&#x…

26 分钟惊讶世界,GPT-4o 引领未来人机交互

前言 原文链接&#xff1a;OpenAI最新模型——GPT-4o&#xff0c;实时语音视频交互&#xff0c;未来人机交互近在眼前 - Kaiho小站 北京时间 5 月 14 日凌晨&#xff0c;OpenAI 发布新一代模型——GPT-4o&#xff0c;仅在 ChatGPT 面世 17 个月后&#xff0c;OpenAI 再次通过…

【机器学习】:基于决策树与随机森林对数据分类

机器学习实验报告&#xff1a;决策树与随机森林数据分类 实验背景与目的 在机器学习领域&#xff0c;决策树和随机森林是两种常用的分类算法。决策树以其直观的树形结构和易于理解的特点被广泛应用于分类问题。随机森林则是一种集成学习算法&#xff0c;通过构建多个决策树并…

代理IP与网络隐私

随着科技的发展&#xff0c;越来越多的人开始享受网络的便利&#xff0c;人们逐步在社交媒体上分享自己的生活。这些公开信息是可以被所有人浏览观看的&#xff0c;但是也会存在部分隐私信息我们并不想要被人知晓&#xff0c;这就牵扯到网络隐私保护问题。 代理IP对于网络隐私保…

纯血鸿蒙APP实战开发——Worker子线程中解压文件

介绍 本示例介绍在Worker 子线程使用ohos.zlib 提供的zlib.decompressfile接口对沙箱目录中的压缩文件进行解压操作&#xff0c;解压成功后将解压路径返回主线程&#xff0c;获取解压文件列表。 效果图预览 使用说明 点击解压按钮&#xff0c;解压test.zip文件&#xff0c;显…

数据结构之栈与队列

一.栈 1.定义&#xff1a;一种线性表&#xff0c;只允许在固定的一端进行删除和插入数据的操作&#xff0c;该端叫栈底&#xff0c;另一端叫栈顶 2.特点&#xff1a;先进后出 注&#xff1a;栈中元素出栈是一对多的(他虽然满足先进后出但是我们可以在pop数据前先获取栈顶元素…

Redis数据结构-RedisObject

1.7 Redis数据结构-RedisObject Redis中的任意数据类型的键和值都会被封装为一个RedisObject&#xff0c;也叫做Redis对象&#xff0c;源码如下&#xff1a; 1、什么是redisObject&#xff1a; 从Redis的使用者的角度来看&#xff0c;⼀个Redis节点包含多个database&#xff…

(实测验证)Gitee代码托管尝试(一)——克隆/下载

一、登录 Gitee&#xff08;码云&#xff09;代码托管平台&#xff1a; Gitee - 基于 Git 的代码托管和研发协作平台 新建个人账户如下&#xff1a; 二、SSH 公钥设置 1、在git安装目录打开“git-cmd.exe”; 2、通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen …

层次式体系结构概述

1.软件体系结构 软件体系结构可定义为&#xff1a;软件体系结构为软件系统提供了结构、行为和属性的高级抽象&#xff0c;由构成系统的元素描述、这些元素的相互作用、指导元素集成的模式以及这些模式的约束组成。软件体系结构不仅指定了系统的组织结构和拓扑结构&#xff0c;并…

[ciscn 2022 东北赛区]math

1.题目 import gmpy2 from Crypto.Util.number import * from flag import flag assert flag.startswith(b"flag{") assert flag.endswith(b"}") messagebytes_to_long(flag) def keygen(nbit, dbit):if 2*dbit < nbit:while True:a1 getRandomNBitIn…

公共命名空间和RHP

概述 RHP的全称是&#xff1a;the little Robot that Helped me Program&#xff0c;帮我编程序的小机器人。 RHP必然存在&#xff0c;C语言的宏、C的模板&#xff0c;都是RHP&#xff1b;更复杂的例子&#xff0c;是lex和yacc&#xff0c;它们是制作程序的程序&#xff0c;也…