当前位置： 首页 > news >正文

前端大屏适配几种方案

news 2026/2/8 23:13:33

一、方案一：rem+font-size

       动态设置HTML根字体大小和body字体大小，会使用到lib-flexible.js插件
lib-flexible.js

(function flexible(window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = (16 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();function setRemUnit() {var rem = docEl.clientWidth / 24docEl.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) {var fakeBody = document.createElement('body')var 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))

我们可以将它下载下来。打开js文件，将设计稿的宽度（1920px）平均分成24等份，每一份为80px。将这个值设置为html字体大小，既1rem = 80px； 24rem = 1920px。

tips：rem是根据html字体大小来计算的，假如html字体为16px，则1rem就等于16px；

 在移动端通常会分成10份，PC端分成24份。
       安装cssrem插件，根节点的字体大小设置为80px。这个是px单位转rem的参考值。

二、方案二：vw（单位）

      直接使用vw单位，屏幕宽度默认为100vw，那么100vw = 1920px；1vw = 19.2px。这个也是使用cssrem插件，直接将body的宽高（1920px * 1080px），将px转成vw单位。

这种方案和第一个方案类似，超宽屏的情况下也是不能全部显示。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}body {width: 100vw;height: 56.25vw;border: 3px solid red;box-sizing: border-box;}ul {display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;height: 100%;}li {width: 33.333%;height: 50%;font-size: 1.5625vw;list-style: none;border: 3px solid green;box-sizing: border-box;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body>
</html>

三、方案三：scale（缩放）强烈推荐

      很多的大屏适配都是使用的这种方案。
这种方案的原理就是根据宽高比例进行缩放。

1、根据宽度比率进行缩放

（宽度比率=网页当前宽度/设计稿宽度）

<script>// 设计稿：1920 * 1080// 1.设计稿尺寸let targetWidth = 1920;// 2.拿到当前设备（浏览器）的宽度// document.documentElement  获取html的宽度let currentWidth =document.documentElement.clientWidth || document.body.clientWidth;// 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)let scaleRatio = currentWidth / targetWidth; // 4.开始缩放网页document.body.style = `transform: scale(${scaleRatio})`;</script>

针对1920 * 1080,3840 * 2160(4k)是没有问题的，但是在超宽屏的情况下还是存在只显示一半的问题。
分析原因：

1920 * 1080 => 要适配 (1920*2=3840, 1080*2=2160, 4k屏) 3840 * 2160
也要适配=> ( 1920*4 = 7680 : 1080 * 2 = 2160) 7680 * 2160 我们当前是根据宽度比率进行缩放的：先设配3840 * 2160scaleRatio = 3840 / 1920  = 2根据这个缩放比率我们的设计稿宽高都会被缩放两倍1920 * 2 = 38401080 * 2 = 2160设配7680 * 2160scaleRatio = 7680 / 1920  =  4根据这个宽度比例我们的设置稿宽高都会被缩放4倍1920 * 4 = 76801080 * 4  = 4240 
这个原先的比例是 4 : 2,现在变成了 4 ：4 ，这也是为什么我们只看到一半高度的原因。

2、动态计算

      动态计算网页宽高

  <script>// 设计稿：1920 * 1080// 1.设计稿尺寸let targetWidth = 1920;let targetHeight = 1080;let targetRatio = 16 / 9; // 宽高比率 （宽 / 高）// 2.拿到当前设备（浏览器）的宽度和高度let currentWidth =document.documentElement.clientWidth || document.body.clientWidth;let currentHeight =document.documentElement.clientHeight || document.body.clientHeight;// 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)// 若currentWidth是4k屏宽度 3840 除于 我们设计稿的宽度 1920  3840/1920 = 2// 这样页面就行进行2倍缩放let scaleRatio = currentWidth / targetWidth; // 参照宽度进行缩放（默认情况下）// 当前页面宽高比例，当页面越宽currentRatio值就越大let currentRatio = currentWidth / currentHeight;// 判断是根据宽度进行缩放，还是根据高度进行缩放if (currentRatio > targetRatio) {// 根据高度进行网页的缩放scaleRatio = currentHeight / targetHeight; // 参照高度进行缩放（屏幕很宽的情况下）document.body.style = `transform: scale(${scaleRatio}) translateX(-50%)`;} else {// 根据宽度进行网页的缩放document.body.style = `transform: scale(${scaleRatio})`;}</script>

比，决定是按照宽度的比例还是高度的比例进行缩放。

相关文章：

前端大屏适配几种方案

一、方案一&#xff1a;remfont-size 动态设置HTML根字体大小和body字体大小&#xff0c;会使用到lib-flexible.js插件lib-flexible.js (function flexible(window, document) {var docEl document.documentElementvar dpr window.devicePixelRatio || 1// adjust body font…...

编程日记 2024/4/14 23:04:31

2011年认证杯SPSSPRO杯数学建模B题(第一阶段)生物多样性的评估全过程文档及程序

2011年认证杯SPSSPRO杯数学建模 B题 生物多样性的评估 原题再现&#xff1a; 2010 年是联合国大会确定的国际生物多样性年。保护地球上的生物多样性已经越来越被人类社会所关注&#xff0c;相关的大规模科研和考察计划也层出不穷。为了更好地建立国际交流与专家间的合作&…...

编程日记 2024/4/14 23:03:30

AcWing 793. 高精度乘法——算法基础课题解

AcWing 793. 高精度乘法 题目描述 给定两个非负整数&#xff08;不含前导 00&#xff09; A 和 B&#xff0c;请你计算 AB 的值。 输入格式 共两行&#xff0c;第一行包含整数 A&#xff0c;第二行包含整数 B。 输出格式 共一行&#xff0c;包含 AB 的值。 数据范围 1≤…...

编程日记 2024/4/14 23:02:28

【一刷《剑指Offer》】面试题 3：二维数组中的查找

力扣对应题目链接&#xff1a;240. 搜索二维矩阵 II - 力扣&#xff08;LeetCode&#xff09; 核心考点&#xff1a;数组相关&#xff0c;特性观察&#xff0c;时间复杂度把握。 一、《剑指Offer》对应内容 二、分析题目 正常查找的过程本质就是排除的过程&#xff0c;谁排除…...

编程日记 2024/4/14 23:01:26

Linux下静态库与动态库使用总结

区别 使用静态库占用的磁盘空间相对比动态库要大。 如果多个可执行程序使用库中同一个函数&#xff0c;那么链接静态库时同一个函数的代码会被复制多份&#xff0c;而链接动态库只复制一份。动态库可共享且版本更新方便 静态链接库在程序编译的时候就被加载进来&#xff0c;不…...

编程日记 2024/4/14 22:59:23

分布式任务调度：架构、原理与实践

引言 在当今快速发展的科技领域中&#xff0c;任务调度作为管理和优化计算资源的重要工具&#xff0c;扮演着至关重要的角色。从单机环境到分布式系统&#xff0c;任务调度的演进不仅跟随着计算机技术的进步&#xff0c;更是为了应对日益复杂的应用场景和需求。本博客将深入探…...

编程日记 2024/4/14 22:54:18

ping命令返回无法访问目标主机和请求超时浅析

在日常经常用ping命令测试网络是否通信正常&#xff0c;使用ping命令时也经常会遇到这两种情况&#xff0c;那么表示网络出现了问题。 1、请求超时的原因 可以看到“请求超时”没有收到任何回复。要知道&#xff0c;IP数据报是有生存时间的&#xff0c;当其生存时间为零时就会…...

编程日记 2024/4/14 22:53:17

地球上的七大洲介绍

地球上的七大洲示意图&#xff1a; 1. 亚洲&#xff08;Asia&#xff09;&#xff1a;世界上最大的洲&#xff0c;面积约为44579000平方公里。亚洲地域辽阔&#xff0c;包括从北极圈到赤道的各种气候和地形。它拥有世界上最多的人口&#xff0c;也是世界上一些最古老文明的发源…...

编程日记 2024/4/14 22:52:16

IntelliJ IDEA 2024 for Mac/Win：引领Java开发新纪元的高效集成环境

在日新月异的软件开发领域&#xff0c;一款高效、智能的集成开发环境&#xff08;IDE&#xff09;无疑是程序员们不可或缺的神兵利器。今天&#xff0c;我要为大家介绍的&#xff0c;正是这样一款集大成之作——IntelliJ IDEA 2024。无论是Mac用户还是Windows用户&#xff0c;只…...

编程日记 2024/4/14 22:49:13

Java 中命令模式，请用代码具体举例

在Java中&#xff0c;命令模式是一种行为设计模式&#xff0c;它允许将请求封装成一个对象&#xff0c;从而使得可以参数化其他对象对请求进行调用、队列化请求、或者记录请求日志&#xff0c;同时支持可撤销的操作。 下面是一个简单的示例代码&#xff0c;展示了如何使用命令模…...

编程日记 2024/4/14 22:48:12

低延时+高并发+强事务丨DolphinDB 交易型内存存储引擎 IMOLTP 使用指南

1. 背景 在一些数据库应用场景中&#xff0c;例如金融行业的交易系统&#xff0c;其主要工作负载来源于对关系表的高频度、高并发的更新和查询操作。这样的应用场景要求数据的读写和计算能够具有低延迟、高并发的特征&#xff0c;同时保证极高的数据一致性&#xff0c;并提供 …...

编程日记 2024/4/14 22:47:10

写代码的修养

看山是山&#xff0c;看水是水 此境界 对业务的思考是浅层的&#xff0c;代码写的不通用&#xff0c;扩展性差&#xff0c;表现在无设计模式 看山不是山&#xff0c;看水不是水 此境界 对业务的思考是中层的&#xff0c;代码写的通用&#xff0c;扩展性好&#xff0c;表现为…...

编程日记 2024/4/14 22:44:08

springboot 问题整合

springboot 启动后访问报错 问题&#xff1a;org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): 原因&#xff1a;mybatis 的全局配置文件和 sql 映射文件没有写 解决&#xff1a;在 application.yml 中添加 mybatis 配置 mybatis:# 全局配…...

编程日记 2024/4/14 22:38:01

UNIAPP二维码展示页亮度调至最亮返回恢复进入前亮度

onLoad(params) {let num plus.screen.getBrightness().toString(); //转字符串是要存到stoage中number类型会存储失败plus.storage.setItem("pmld", num)plus.screen.setBrightness(1); //设置屏幕亮度&#xff0c;范围0-1 }onUnload() {let platformuni.getSystem…...

编程日记 2024/4/14 22:35:58

Golang ProtoBuf 初学者完整教程：安装

一、Protobuf 特点 更高效&#xff1a;使用二进制编码&#xff0c;相比XML/JSON更加高效 跨语言支持&#xff1a;Protobuf 在 .proto 定义需要处理的结构化数据&#xff0c;可以通过 protoc 工具&#xff0c;将 .proto 文件转换为 C、C、Golang、Java、Python 等多种语言的代…...

编程日记 2024/4/14 22:34:57

Isolation Forest 简介

1. 简介 孤立森林 iForest(Isolation Forest)是一种无监督学习算法&#xff0c;用于识别异常值。其基本原理是&#xff1a;异常数据由于数量较少且与正常数据差异较大&#xff0c;因此在被隔离时需要较少的步骤。 两个假设&#xff1a; 1. 异常的值是非常少的(如果异常值很多&…...

编程日记 2024/4/14 22:33:55

Java爬虫携带sign签名

站点&#xff1a;https://www.mytokencap.com/ 代码分析先不写了&#xff0c;大家自行解决&#xff0c;贴代码 1、业务请求设计 public static void md5Pro() {String url "https://api.mytokenapi.com/ticker/currencylistforall";Map<String, String> he…...

编程日记 2024/4/14 22:32:54

设计者模式之中介者模式（下）

3&#xff09;中介者与同事类的扩展 1.结构图 新增了具体同事类Label和具体中介者类SubConcreteMediator。 2.代码实现 //文本标签类&#xff1a;具体同事类 public class Label extends Component {public void update() {System.out.println("文本标签内容改变&#…...

编程日记 2024/4/14 22:31:53

SAP SD学习笔记04 - 出荷Plant（交货工厂），出荷Point（装运点），输送计划，品目的可用性检查，一括纳入/分割纳入，仓库管理

上一章讲了SD的主数据。 SAP SD学习笔记03 - SD模块中的主数据-CSDN博客 本章讲出荷Plant&#xff08;交货工厂&#xff09;&#xff0c;出荷Point&#xff08;装运点&#xff09;和出和路线。 还是偏理论多一些&#xff0c;后面的文章尽量多加些练习巩固一下。 1&#xff0…...

编程日记 2024/4/14 22:30:52

bind包装器——C++新特性(三)

文章目录 bindbind函数模板的原型bind 包装器的用途其他使用示例 &#x1f396; 博主的CSDN主页&#xff1a;Ryan.Alaskan Malamute &#x1f4dc; 博主的代码仓库主页 [ Gitee ]&#xff1a;ryanala [GitHub]&#xff1a; Ryan-Ala bind bind也是一种函数包装器&#xf…...

编程日记 2024/4/14 22:29:51

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2026/2/2 18:33:19

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2026/1/29 2:11:49

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...

编程新知 2025/12/13 5:58:57

简单聊下阿里云DNS劫持事件

阿里云域名被DNS劫持事件 事件总结 根据ICANN规则&#xff0c;域名注册商&#xff08;Verisign&#xff09;认定aliyuncs.com域名下的部分网站被用于非法活动&#xff08;如传播恶意软件&#xff09;&#xff1b;顶级域名DNS服务器将aliyuncs.com域名的DNS记录统一解析到shado…...

编程新知 2026/2/1 18:45:49

华硕电脑，全新的超频方式，无需进入BIOS

想要追求更佳性能释放 或探索更多可玩性的小伙伴&#xff0c; 可能会需要为你的电脑超频。 但我们常用的不论是BIOS里的超频&#xff0c; 还是Armoury Crate奥创智控中心超频&#xff0c; 每次调节都要重启&#xff0c;有点麻烦。 TurboV Core 全新的超频方案来了 4不规…...

编程新知 2026/2/1 10:30:06

如何处理React中表单的双向数据绑定？

在前端开发中&#xff0c;双向数据绑定&#xff08;Two-way Data Binding&#xff09;是指视图&#xff08;View&#xff09;与数据模型&#xff08;Model&#xff09;之间保持同步&#xff1a;当模型发生变化时&#xff0c;视图会自动更新&#xff1b;当视图&#xff08;用户输…...

编程新知 2026/1/7 9:02:12