可视化面板布局适配屏幕-基于 flexible.js + rem 智能大屏适配

可视化面板布局适配屏幕-基于 flexible.js + rem 智能大屏适配

  • VScode 安装cssrem插件
  • 引入flexible.js
  • 在之后的开发都使用rem为单位,安装cssrem插件就是为了快捷将px转为rem
  • 我们的设计稿是1920px,设置最小宽度为1024px,最后,我们可能需要结合一下媒体查询约束屏幕尺寸

在这里插入图片描述

VScode 安装cssrem插件

引入flexible.js

  • 确认flexible.js是否引入成功,看html标签是否成功设置上了font-size
(function flexible(window, document) {let docEl = document.documentElement;let dpr = window.devicePixelRatio || 1;// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {// 把屏幕分为24等分let rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resizewindow.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function(e) {if (e.persisted) {setRemUnit();}});// detect 0.5px supportsif (dpr >= 2) {let fakeBody = document.createElement("body");let testElement = document.createElement("div");testElement.style.border = ".5px solid transparent";fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if (testElement.offsetHeight === 1) {docEl.classList.add("hairlines");}docEl.removeChild(fakeBody);}
})(window, document);

在之后的开发都使用rem为单位,安装cssrem插件就是为了快捷将px转为rem

我们的设计稿是1920px,设置最小宽度为1024px,最后,我们可能需要结合一下媒体查询约束屏幕尺寸

/* 约束屏幕尺寸 */
// 当屏幕宽度小于1024px时
@media screen and (max-width: 1024px) {html {// 1024/24=42pxfont-size: 42px !important;}
}
// 当屏幕宽度大于1920px时
@media screen and (min-width: 1920px) {html {// 1920/24=80pxfont-size: 80px !important;}
}

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

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

相关文章

管理非结构化数据

据IDC调查,当前企业80%的数据为非结构化数据或半结构化数据,而结构化数据是他们管理的重点,数据的大头-非结构化数据却被忽视。然而,非结构化数据也有着它的价值。 管理好非结构化数据对于公司释放有价值资产、高效决策和高效部署…

nodejs之log4js日志管理

log4js官网 npm i log4jsconst log4js require("log4js"); const path require("path"); Object.defineProperties; log4js.configure({appenders: {aaa: {type: "dateFile", //设置为这种类型,日志文件会分割filename: path.reso…

数据安全全场景覆盖

随着万物互联时代的到来,海量物联网设备产生的庞大数据逐渐超出云端服务器的处理能力,同时算力向边缘侧不断迁移,边缘计算逐渐成为云计算的重要延伸和补充。根据《中国边缘计算服务器市场报告》、《中国边缘云计算行业展望报告》等预测&#…

rdflib命名空间的问题

yaga Namespace("https://yago-knowledge.org/resource/") a yaga.Apple b yaga[Appel]这两者的区别,yaga[Appel]这里的Apple是变量,而yaga.Apple生成的实体就是“https://yago-knowledge.org/resource/Apple”

县供电公司员工向媒体投稿发文章用亲身经历告诉你并不难

在县供电公司的日子里,我肩负着一项至关重要的使命——信息宣传工作。这不仅仅是一份职责,更是连接公司与外界的桥梁,通过新闻稿件传递我们的声音,展示我们的成果。然而,回忆起刚刚踏入这个领域的时光,那段经历至今让我感慨万千。 初涉投稿,步履维艰 刚接手这项工作时,我的投稿…

又发现一个ai生成音乐的网站-heymusic

网址 https://heymusic.ai/ 尴尬,不挂梯子能登录进来,但是谷歌账号注册不了,刷新了几遍也没注册上。 看了下价格,应该不是免费的,所以也没了试用的兴趣。 我也不想用别的邮箱注册了,所以只能简单的水一…

Spring Boot应用部署 - Tomcat/Jetty/Undertow容器对比和使用场景

在前面的文章中,我们介绍了如何替换Tomcat容器,现总结下Tomcat/Jetty/Undertow容器。 那在Spring Boot应用部署中,常见的三种Web容器是Tomcat、Jetty和Undertow,它们各有特点,适用于不同的应用场景: Tomc…

频谱分析:深入解析与全面介绍

频谱分析 一、引言 频谱分析,作为一种广泛应用于信号处理和波谱分析的方法,其在现代科技领域的重要性不言而喻。从基础的物理现象到复杂的通信系统,频谱分析都扮演着至关重要的角色。本文将对频谱分析进行深入的解析和全面的介绍&#xff0…

速盾的具体防御能力如何?

速盾是一家专注于网络安全领域的技术公司,致力于为企业提供全方位的网络安全防护服务。其具体防御能力主要体现在以下几个方面: DDoS防御:速盾采用智能化的DDoS防护系统,能够及时识别和拦截各类DDoS攻击流量,确保企业网…

A*算法求最短路

Problem: 无链接 文章目录 思路解题方法复杂度Code 思路 这是一个经典的A寻路算法问题。A算法是一种启发式搜索算法,题解结合了最佳优先搜索和Dijkstra算法的优点,能够在寻找最短路径的过程中避免大量的无谓搜索,提高了效率。 在这个问题中&a…

VxTerm使用教程:连接SSH服务端设备,什么是SSH

一、什么是SSH&#xff1f; <摘自百度> 安全外壳协议 SSH&#xff0c;即安全外壳协议&#xff08;Secure Shell&#xff09;&#xff0c;是一种网络协议&#xff0c;用于在计算机网络上提供安全的远程登录和命令执行功能。 SSH通过加密通信通道来保护数据传输&#xff0c…

电子元器件选型中的关键考虑因素

电子元器件选型是电子设计中的重要环节&#xff0c;其直接影响到电路的性能、成本、可靠性等。在进行电子元器件选型时&#xff0c;应综合考虑以下关键因素&#xff1a;      1. 技术指标      功能&#xff1a; 所选元器件应能够满足电路的功能要求。例如&#xff0c;…

vue3项目 文件组成

从头捋顺一遍vue3项目文件目录 前置知识JS模块化什么是依赖&#xff1f;安装依赖webpack能做什么&#xff1f;vue基本使用 不借助vue-cli&#xff0c;从0开始搭建vue项目。index.html、main.js、App.vue引入npm引入webpack引入babel引入vue-loaderwebpack配置webpack配置 前置知…

电-热耦合市场联合出清!考虑均衡约束的综合能源系统电-热分配方法程序代码!

前言 随着现代城市面临环境问题&#xff0c;原来燃煤的水和空间供暖设备已逐渐被电锅炉和热泵等电气设备所取代。此外&#xff0c;集中生产热能并通过管网分配热能的区域供暖系统&#xff0c;由于其更高的效率&#xff0c;在冬季漫长寒冷的国家和地区越来越受欢迎。供暖设备的…

超级大转盘!(html+less+js)(结尾附代码)

超级大转盘&#xff01;&#xff08;结尾附代码&#xff09; 网上看到有人用转盘抽奖&#xff0c;怀疑是不是有问题&#xff0c;为什么每次都中不了&#xff0c;能不能整个转盘自己想中啥中啥&#xff0c;查阅了网上写得好的文章&#xff0c;果然实现了只中谢谢参与&#xff0…

JAVA栈相关习题3

1.将递归转化为循环 比如&#xff1a;逆序打印链表 // 递归方式void printList(Node head){if(null ! head){printList(head.next);System.out.print(head.val " ");}} // 循环方式void printList(Node head){if(nullhead){return;}Stack<Node> snew Stack<…

4.5_shell的执行流控制

##1.for语句## &#xff08;1&#xff09;for语句作用 为循环执行动作 &#xff08;2&#xff09;for语句结构 for 定义变量 do 使用变量&#xff0c;执行动作 done 结束标志 &#xff08;3&#xff09;for语句的基本格式 格式1 格式1&#xff1a;#!/b…

【工程师的自我修养】前言

一、为什么大家不帮我&#xff1f; 九年义务教育4年大学&#xff0c;学生早已习惯了有个老师带着&#xff0c;在学校里敢于问问题的同学是好学的、上进的。但在社会中问问题往往是受到冷落的、需要低声下气的。从天堂到地狱的强烈落差&#xff0c;是最让毕业生无所适从的。为什…

OpenHarmony实战开发——引入开源C/C++库之Har包里的NDK

Har 包 HAR&#xff08;Harmony Archive&#xff09;是静态共享包&#xff0c;可以包含代码、C 库、资源和配置文件。通过 HAR 可以实现多个模块或多个工程共享 ArkUI 组件、资源等相关代码。HAR 不同于 HAP&#xff0c;不能独立安装运行在设备上&#xff0c;只能作为应用模块…

如何查看自己的电脑是否有(支持)无线网卡驱动

要查看自己的电脑是否支持无线网卡驱动,可以按照以下步骤进行检查: 打开"设备管理器" - 在Windows 10/11中,可以在搜索栏输入"设备管理器"打开它 - 在旧版Windows系统中,可以通过"控制面板"->"“系统和安全”->""系统&quo…