根据 JS 自动定义页面缩放比(根据分辨率进行适配 | 文字大小自适应)元素宽高随窗口变化也可用此方法

本文主要是介绍根据 JS 自动定义页面缩放比(根据分辨率进行适配 | 文字大小自适应)元素宽高随窗口变化也可用此方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用方法:

  1. 将以下代码保存为一个js文件(例如:flexible.js);
  2. 在html文件得顶部引入该js;
  3. 在css里使用时得单位为rem(例如:span{ font-size : .45rem ; height : 5rem ;//单位自己换算,这里省略 });

备注:
元素的高度和宽度用此方法(即在引入js得情况下单位为rem),效果为随窗口尺寸的变化而变化,自认为比百分比用起来舒服

!function (a, b) {function c() {var b = f.getBoundingClientRect().width;b / i > 540 && (b = 540 * i);var c = b / 10;f.style.fontSize = c + "px", k.rem = a.rem = c}var d, e = a.document,f = e.documentElement,g = e.querySelector('meta[name="viewport"]'),h = e.querySelector('meta[name="flexible"]'),i = 0,j = 0,k = b.flexible || (b.flexible = {});if (g) {console.warn("将根据已有的meta标签来设置缩放比例");var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l && (j = parseFloat(l[1]), i = parseInt(1 / j))} else if (h) {var m = h.getAttribute("content");if (m) {var n = m.match(/initial\-dpr=([\d\.]+)/),o = m.match(/maximum\-dpr=([\d\.]+)/);n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))}}if (!i && !j) {var p = a.navigator.userAgent,q = (!!p.match(/android/gi), !!p.match(/iphone/gi)),r = q && !!p.match(/OS 9_3/),s = a.devicePixelRatio;i = q && !r ? s >= 3 && (!i || i >= 3) ? 3 : s >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i}if (f.setAttribute("data-dpr", i), !g)if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g);else {var t = e.createElement("div");t.appendChild(g), e.write(t.innerHTML)}a.addEventListener("resize", function () {clearTimeout(d), d = setTimeout(c, 300)}, !1), a.addEventListener("pageshow", function (a) {a.persisted && (clearTimeout(d), d = setTimeout(c, 300))}, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {var b = parseFloat(a) * this.rem;return "string" == typeof a && a.match(/rem$/) && (b += "px"), b}, k.px2rem = function (a) {var b = parseFloat(a) / this.rem;return "string" == typeof a && a.match(/px$/) && (b += "rem"), b}
}(window, window.lib || (window.lib = {}));

这篇关于根据 JS 自动定义页面缩放比(根据分辨率进行适配 | 文字大小自适应)元素宽高随窗口变化也可用此方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1118640

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

浅谈主机加固,六种有效的主机加固方法

在数字化时代,数据的价值不言而喻,但随之而来的安全威胁也日益严峻。从勒索病毒到内部泄露,企业的数据安全面临着前所未有的挑战。为了应对这些挑战,一种全新的主机加固解决方案应运而生。 MCK主机加固解决方案,采用先进的安全容器中间件技术,构建起一套内核级的纵深立体防护体系。这一体系突破了传统安全防护的局限,即使在管理员权限被恶意利用的情况下,也能确保服务器的安全稳定运行。 普适主机加固措施:

webm怎么转换成mp4?这几种方法超多人在用!

webm怎么转换成mp4?WebM作为一种新兴的视频编码格式,近年来逐渐进入大众视野,其背后承载着诸多优势,但同时也伴随着不容忽视的局限性,首要挑战在于其兼容性边界,尽管WebM已广泛适应于众多网站与软件平台,但在特定应用环境或老旧设备上,其兼容难题依旧凸显,为用户体验带来不便,再者,WebM格式的非普适性也体现在编辑流程上,由于它并非行业内的通用标准,编辑过程中可能会遭遇格式不兼容的障碍,导致操

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中,我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试,如何有效地规划和启动测试,如何评估测试是否成功,您应该关注哪些指标,多年来我们发现的常见错误等等。 什么是A/B测试? A/B测试(有时称为“分割测试”)是一种实验类型,其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体,以查看哪一种效果最好。 本质上,A/B测

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡,拥有登录权限的账号密码,一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 (如果是1集群把75改成66) 交互式开发 执行器选Terminal 密码随便设一个(需记住) 工作空间:私有数据、全部文件 加速器选GeForce_RTX_2080_Ti