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

前端大屏适配几种方案

news 文章来源：https://blog.csdn.net/weixin_53729216/article/details/137753823 2024/11/1 14:21:50

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

MXNet的下载安装及问题处理

1、MXNet介绍&#xff1a; MXNet是一个开源的深度学习框架&#xff0c;以其灵活性和效率著称&#xff0c;支持多种编程接口&#xff0c;包括Python、C、R、Julia、Scala等。MXNet支持大规模分布式训练&#xff0c;同时兼顾CPU和GPU的计算资源&#xff0c;尤其擅长于模型并行和数…...

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

Python 中的列表排序和排序规则

Python 中的列表排序和排序规则 在 Python 中&#xff0c;列表的排序是一个常见的操作&#xff0c;可以使用内置函数 sorted() 或列表对象的 sort() 方法来完成。下面将介绍这两种方法以及排序规则的使用方式。 1. 使用 sorted() 函数排序列表&#xff08;临时性排序&#xf…...

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

面经整理1

感觉好几个都是backtracking Letter Combinations of a Phone Number - LeetCode 典型的backtracking&#xff0c;注意String的处理 class Solution {String[] keyboard new String[]{"", "", "abc","def","ghi","…...

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

ChatGPT个人专用版 SSRF漏洞复现(CVE-2024-27564)

0x01 产品简介 ChatGPT个人专用版是一种基于 OpenAI 的 GPT-3.5 、GPT-4.0语言模型的产品。它是设计用于 Web 环境中的聊天机器人，旨在为用户提供自然语言交互和智能对话的能力。PHP版调用OpenAI接口进行问答和画图，采用Stream流模式通信，一边生成一边输出。前端采用EventS…...

编程日记 2024/4/14 22:25:46

Python中的可哈希与不可哈希对象详解

文章目录 1. 前置知识&#xff1a;哈希是什么2. 可哈希和不可哈希对象的定义2.1可哈希2.2 不可哈希 3. 对象的哈希方法3.1 自定义对象的哈希方法3.2 可哈希性与等价性3.3 哈希值的用途 推荐 在复习可变对象和不可变对象时&#xff0c;学到了这个内容 1. 前置知识&#xff1a;哈…...

编程日记 2024/4/14 22:24:45

【嵌入式DIY实例】-DIY速度计

DIY速度计 文章目录 DIY速度计1、硬件准备1.1 NEO-6M GPS模块介绍1.2 硬件接线原理图2、代码实现本文将介绍如何使用模拟仪表和 GPS 模块制作 DIY Arduino 速度计。 仪表用于显示当前速度，而GPS模块用于实时跟踪速度。 该项目将 Arduino 板与 GPS 模块相结合，在经典模拟仪表上…...

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

1.0 Hadoop 教程

1.0 Hadoop 教程 分类 Hadoop 教程 Hadoop 是一个开源的分布式计算和存储框架&#xff0c;由 Apache 基金会开发和维护。 Hadoop 为庞大的计算机集群提供可靠的、可伸缩的应用层计算和存储支持&#xff0c;它允许使用简单的编程模型跨计算机群集分布式处理大型数据集&#xf…...

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

【无人机/平衡车/机器人】详解STM32+MPU6050姿态解算—卡尔曼滤波+四元数法+互补滤波（文末附3个算法源码）

效果： MPU6050姿态解算-卡尔曼滤波+四元数+互补滤波 目录 基础知识详解 欧拉角...

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

智能水务系统：构建高效节水的城市水网

随着城市化进程的加速和人民生活水平的提高&#xff0c;对水务管理的需求也越来越高。传统的水务管理方式已经无法满足现代社会的需求&#xff0c;而智能水务系统的出现为水务管理带来了新的变革。本文将从项目背景、需求分析、建设目标、建设内容、技术方案、安全设计等方面&a…...

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

【JavaEE初阶系列】——网络编程 UDP客户端/服务器 程序实现

目录 &#x1f6a9;UDP和TCP之间的区别 &#x1f388;TCP是有连接的 UDP是无连接的 &#x1f388;TCP是可靠传输 UDP是不可靠传输 &#x1f388;TCP是面向字节流 UDP是面向数据报 &#x1f388;TCP和UDP是全双工 &#x1f469;&#x1f3fb;‍&#x1f4bb;UDP的socket ap…...

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

做条形码哪个网站比较好/线上销售渠道有哪些

用过Windows XP系统的用户都知道&#xff0c;Windows XP有专用的窗口主题&#xff0c;很具特色。可是&#xff0c;Windows XP样式的窗口主题在默认的情况下&#xff0c;其标题栏都比较宽&#xff0c;尤其是显示器的分辨率为800600的时候&#xff0c;用IE浏览器或资源管理器时&a…...

编程日记 2024/11/1 13:57:47

深圳网站建设黄浦网络-技术差/app下载免费安装

mysql中给一个用户授权如select&#xff0c;insert&#xff0c;update&#xff0c;delete等其中的一个或者多个权限&#xff0c;主要使用grant命令&#xff0c;格式为&#xff1a; 给没有用户授权 grant 权限 on 数据库对象 to 用户主机IP identified by 密码; 给已经存在的用户…...

编程日记 2024/11/1 11:55:58

技术外包/东莞网站seo优化

一、简单工厂模式&#xff08;静态工厂模式&#xff09; 1、简单说明工厂模式&#xff1a;现在所谓的个性化定制就是一个很好的列子&#xff0c;比如你想买一辆与众不同的汽车&#xff0c; 你就去汽车生产厂家说你要什么样的汽车&#xff0c;之后他就会按你的要求给你生产你的…...

编程日记 2024/11/1 8:56:45

wordpress单页面主题/南京seo优化

每一间店铺都应该拥有专属的品牌形象。 商家可以根据内容类型的定位&#xff0c;通过广告位、富文本内容、店铺信息等组件进行对店铺品牌形象的塑造&#xff0c;搭配底部导航栏的自定义配置&#xff0c;以及店铺的主题色彩风格&#xff0c;可更好的提升用户体验&#xff0c;营…...

编程日记 2024/11/1 6:39:53

长春比较有名的做网站建设/百度搜索风云榜排名

昨天中午午饭后&#xff0c;和KK去星巴克买咖啡&#xff0c;收银小姐每次都会把客人的姓写在杯子上&#xff0c;这样就不会搞错了。这次小姐又问了&#xff0c;我和KK同时回答&#xff0c;我回答说“康”&#xff0c;她回答说“王”&#xff0c;结果小姐就说“是唐小姐对吗&…...

编程日记 2024/11/1 5:27:00

沈阳网站建设方案模板/许昌网站推广公司

为了让CSR867x的开发更容易&#xff0c;现与思度科技联合推出CSR867x学习板【淘宝链接&#xff1a;思度科技CSR开发板】。 技术交流QQ群号&#xff1a;743434463 开发板会员QQ群号&#xff1a;725398389&#xff08;凭订单号入群&#xff0c;赠PPT、项目源码、视频教程&#x…...

编程日记 2024/11/1 5:00:33