首页 > 其他分享 >数据大屏最简单自适应方案,无需适配 rem 单位

数据大屏最简单自适应方案,无需适配 rem 单位

时间:2022-12-21 14:13:54浏览次数:36  
标签:scale const documentElement 适配 rem 大屏 document

您是不是有如下疑惑。

开发数据大屏不能完全自适应?

使用rem自适应还需要注意单位很麻烦?

有没有那种随便我怎么写都能够完全自适应的?

有没有那种用最少的代码最简单的方法实现完全自适应?最好是不需要我用脑子去思考的那种方法。

使用scale适配大屏。实现数据大屏在任何分辨率的电脑上均可安然运作。无需特定编写rem单位,也不需要考虑单位使用失误导致适配不完全。您即使全部用position去定位在其他屏幕上都不会乱。(%和px随便用)

最终效果

标签:scale,const,documentElement,适配,rem,大屏,document
From: https://www.cnblogs.com/haiyang-/p/16996121.html

相关文章

  • [vue] 项目使用rem 单个组件 PC端自适应大屏
    rem.jsexportfunctionresetRem(){//基准大小baseSize=100;constbasePc=baseSize/1440;//表示1440的设计图,使用100PX的默认值constvW=window.inner......
  • [echart] 字体自适应的方法(使用rem)
    functionsetFontSize(res){constclientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;if(!clientWidth)return;......
  • 虹科方案|将ESXi与适用于Mac的ATTO ThunderLink 适配器启用的Thunderbolt综合使用
    一、引言VMwarevSphere™ESXi5.1将AppleMacPro®引入了VMware硬件认证列表(HCL)。下一代AppleMacPro硬件的更新带来了Thunderbolt技术的引入。随着Apple使用Thunder......
  • 记录--可视化大屏-用threejs撸一个3d中国地图
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈本项目使用vue-cli创建,但不影响使......
  • Java Selenium封装--RemoteWebElement
    packagecom.selenium.driver;importjava.sql.SQLException;importjava.util.List;importorg.json.JSONException;importorg.openqa.selenium.By;importorg.openqa.sel......
  • KBL406-ASEMI适配高端电源整流桥KBL406
    编辑:llKBL406-ASEMI适配高端电源整流桥KBL406型号:KBL406品牌:ASEMI封装:KBL-4特性:整流桥正向电流:4A反向耐压:600V恢复时间:>2000ns引脚数量:4芯片个数:4芯片尺寸:84MIL浪涌电流:120A......
  • KBL406-ASEMI适配高端电源整流桥KBL406
    编辑:llKBL406-ASEMI适配高端电源整流桥KBL406型号:KBL406品牌:ASEMI封装:KBL-4特性:整流桥正向电流:4A反向耐压:600V恢复时间:>2000ns引脚数量:4芯片个数:4芯片尺寸:84MIL......
  • [Typescript] 140. Extreme - Integers Comparator
    Implementatype-levelintegerscomparator.We'veprovidedanenumforindicatingthecomparisonresult,likethis:If a isgreaterthan b,typeshouldbe......
  • 设计原则与模式013 适配器模式
    适配器模式的定义:将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法工作的两个类能够在一起工作;适配器模式的UML图如下,适配器需要将Adaptee被适......
  • 「REMAKE C++」Day 3
    Day3完成了C++Primer第4,5章的阅读常量迭代器,不能修改其所指向的对象,可以移动它,vector<int>::const_iteratorit=v.begin();,常量容器只有常量迭代器。标......