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

前端大屏适配几种方案

news 2026/2/8 22:39:38

一、方案一：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

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2026/2/7 22:13:48

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2026/2/8 22:05:17

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2026/2/6 11:08:25