根据屏幕尺寸设置html根字号fontSize大小并刷新

<script>
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {// 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920console.log(document.documentElement.clientWidth);// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'// 设置fontSize 后就可以使用rem实现适配if (document.documentElement.clientWidth === 3840) {document.documentElement.style.fontSize = '24px'}
}// 初始化
setRem()// 改变窗口大小时重新设置 rem
window.onresize = function () {history.go(0);setRem()
}</script>
<template><div id="app"><!-- <KeepAlive> --><router-view></router-view><!-- </KeepAlive> --></div>
</template><script>
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {// 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920console.log(document.documentElement.clientWidth);// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'if (document.documentElement.clientWidth === 3840) {document.documentElement.style.fontSize = '24px'}
}// 初始化
setRem()// 改变窗口大小时重新设置 rem
window.onresize = function () {history.go(0);setRem()
}export default {name: 'App',components: {}
}
</script><style>
* {margin: 0;padding: 0;
}@font-face {font-family: 'Alibaba PuHuiTi-Bold';src: url('@/assets/fonts/ALIBABA-PUHUITI-BOLD.TTF') format('truetype');font-weight: bold;font-style: normal;
}@font-face {font-family: 'PangMenZhengDao-3';src: url('@/assets/fonts/庞门正道标题体3.0.TTF') format('truetype');font-weight: bold;font-style: normal;
}// 滚动条样式
::-webkit-scrollbar {width: 4px;height: 4px;
}::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {border-radius: 999px;border: 1px solid transparent;
}::-webkit-scrollbar-track {box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
}::-webkit-scrollbar-thumb {min-height: 20px;background-clip: content-box;box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
}::-webkit-scrollbar-corner {background: transparent;
}
</style>

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

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

相关文章

shell编程-3

文章目录 shell学习第三天while 循环第一天的小游戏练习: 编写抽同学回答问题的脚本要想让这个脚本永久有效如何知道两个文件里的内存一样&#xff1f;如何判断某个人已经抽过了 文本处理相关命令seqxargsuniqsorttrcutawkpastesplitcoljoin小结一下作业 小知识点写脚本的流程怎…

LeetCode面试题02.07链表相交

力扣题目链接 思想&#xff08;数学&#xff09;&#xff1a;设链表A的长度为a&#xff0c;链表B的长度为b&#xff0c;A到交点D的距离为c&#xff0c;B到交点D的距离为d。显然可以得到两者相交链表的长度为&#xff1a;a - c b - d ,变换一下式子得到&#xff1a;a d b c…

【Triangulation】三角测量

【Triangulation】三角测量 1. 三角测量定义2. 公式推导3. 代码实现中&#xff1a; 1. 三角测量定义 在三维重建中&#xff0c;三角测量&#xff08;Triangulation&#xff09;是一种基本的算法&#xff0c;用于利用两个摄像头从两个不同视角拍摄得到的图片中的匹配点来还原一…

css-动画效果学习示例

阴影 x-轴 y-轴 模糊度 颜色 (正负值可以表示角度问题) 可以加多个阴影 内置阴影 transition 可以添加动画延迟效果 向z轴缩进&#xff0c;开启透视respective 触发旋转效果 学习来源 &#xff1a;动画属性_哔哩哔哩_bilibili

如何做标准化?| 京东云技术团队

在现代信息化的市场环境和社会中&#xff0c;标准化已经成为了各种行业的一个重要的标志。标准化不仅可以提升生产效率&#xff0c;减轻质量问题&#xff0c;还可以增加产品的可靠性和互通性。在这篇文章中&#xff0c;我们将探讨如何做标准化&#xff0c;为您提供详细的指导和…

深入Docker5:安装nginx部署完整项目

目录 准备 为什么要使用nginx mysql容器构建 1.删除容器 2.创建文件夹 3.上传配置文件 4.命令构建mysql容器 5.进入mysql容器&#xff0c;授予root所有权限 6.在mysql中用命令运行sql文件 7.创建指定数据库shop 8.执行指定的sql文件 nginx安装与部署 1.拉取镜像 2…

docker:Java通过nginx获取客户端的真实ip地址

问题现象 我们的平台使用Spring Cloud微服务架构&#xff0c;使用Spring Boot构建Java服务&#xff0c;使用google的jib插件打成docker镜像包我们使用docker虚拟化部署&#xff0c;使用docker-compose统一管理所有服务&#xff0c;包括Java服务和nginx等组件我们前后端分离&am…

游戏《泰坦陨落2》msvcr120.dll丢失的多种解决方法分享

在Windows 11操作系统环境下&#xff0c;众多玩家在体验《泰坦陨落2》这款备受瞩目的射击游戏时&#xff0c;遭遇了一个令人困扰的技术问题&#xff1a;系统提示缺失msvcr120.dll文件。这一关键的动态链接库文件对于游戏的正常运行至关重要&#xff0c;它的缺失直接导致了《泰坦…

如何用 ChatGPT生成生成元宇宙内容

ChatGPT 是一种强大的自然语言处理模型&#xff0c;可以生成高质量的文本内容&#xff0c;包括元宇宙相关内容。以下是一些建议&#xff0c;帮助您使用 ChatGPT 生成元宇宙相关内容&#xff1a; 明确需求&#xff1a;在开始生成内容之前&#xff0c;请明确您需要什么样的元宇宙…

ACEeditor使用手册(二)

文章目录 ACEeditor使用手册3. 代码高亮与语言支持3.1 语法高亮内置语言模式列表自定义语言模式动态切换语言模式 3.2 代码补全与提示启用代码补全功能自定义补全规则第三方补全库的集成 3.3 代码片段与模板插入代码片段自定义代码片段代码模板的使用 4. 编辑器配置与扩展4.1 编…

小白数学建模 Mathtype 7.7傻瓜式下载安装嵌入Word/WPS以及深度使用教程

数学建模Mathtype的下载安装嵌入Word/WPS以及深度使用教程 一 Mathtype 的下载安装1.1 安装前须知1.2 下载压缩包1.3 安装注册 二 嵌入Word/WPS2.1 嵌入Word2.1.1 加载项嵌入 Word2.1.2 宏录制嵌入 Word 2.2 嵌入 WPS2.2.1 加载项嵌入 WPS2.2.2 宏录制嵌入 WPS 2.3 嵌入时报错解…

【GNN报告】“青源Talk”-图可信学习与图大模型研究进展

北航王啸-图自监督学习 简介 介绍 浙大杨洋-探索大图模型预训练 总括 介绍 参考 Yang Yang - Zhejiang University dgraph-web DGraph: ALarge-Scale Financial Dataset for Graph Anomaly Detection All in One: Multi-task Prompting for Graph Neural Networks&#xf…

element-ui 打包流程源码解析(上)

目录 1&#xff0c;源码整体结构1.1&#xff0c;build 目录1.2&#xff0c;examples 目录1.3&#xff0c;packages 目录1.4&#xff0c;src 目录 2&#xff0c;打包整体流程2.1&#xff0c;npm run build:file2.1.1&#xff0c;build/bin/iconInit.js2.1.2&#xff0c;build/bi…

vue2 -- 截图工具html2canvas

文章目录 🍉需求描述🍉基础功能实现🍉下载另存为本地图片功能🍉需求描述 可以将网页中的指定元素或整个页面截取为图片,以便保存或分享。 🍉基础功能实现 在 Vue 中使用 html2canvas 实现 1:安装 html2canvas 库。你可以使用 npm 安装,命令如下: npm install …

K8S-YAML

一、Kubernetes对象的描述 kubernetes中资源可以使用YAML描述&#xff08;如果您对YAML格式不了解&#xff0c;可以参考YAML语法&#xff09;&#xff0c;也可以使用JSON。其内容可以分为如下四个部分&#xff1a; typeMeta&#xff1a;对象类型的元信息&#xff0c;声明对象…

一款开源且不限制大小可以设置过期时间的支持分享的的开源文件共享系统picoshare 部署教程

1.拉取镜像 2.部署 创建目录 mkdir -p /opt/picoshare/data 部署 其中:"somesecretpass"是密码 docker run \--env "PORT4001" \--env "PS_SHARED_SECRETsomesecretpass" \--publish 10005:4001/tcp \--volume "/opt/picoshare/data:…

最优解-最长公共子序列

问题描述 最长公共子序列(Longest Common Subsequence&#xff0c;LCS)即求两个序列最长的公共子序列(可以不连续)。比如3 2 1 4 5和1 2 3 4 5两个序列&#xff0c;最长公共子序列为2 4 5 长度为3。解决这个问题必然要使用动态规划。既然要用到动态规划&#xff0c;就要知道状…

oracle11g的闪回技术-闪回表-时间戳

--数据库闪回表 --1创建表&#xff08;登录模式system&#xff09; CREATE table dept2 as select * from dept;--此语句如果加上where条件可用于工作中数据的临时备份 select * from dept2;--查询新建表信息 --进入sql>set time on 通过时间点闪回 记录弹出的时间点&#…

certificate-transparency-go用例

文章目录 证书的SCT列表验证SCT依赖包加载证书初始化log机构信息离线验证在线验证 证书的SCT列表 浏览器对证书链的合法性检查通过后&#xff0c;会再检查服务端证书附件里的SCT列表&#xff08;Signed Certificate Timestamp&#xff09;&#xff1b; 浏览器内置了一批certif…

Tmux教程

会话&#xff08;session&#xff09;、窗口&#xff08;window&#xff09;、窗格&#xff08;panel&#xff09;的概念 参考资料&#xff1a;Tmux 使用教程 - 阮一峰的网络日志 (ruanyifeng.com) 命令行的典型使用方式是&#xff0c;打开一个终端窗口&#xff08;terminal …