前端大屏项目适配方法

要在F11全屏模式下查看

方法一,rem + font-size

动态设置HTML根字体大小 和 body 字体大小(lib_flexible.js)

  • 将设计稿的宽(1920)平均分成 24 等份, 每一份为 80px。
  • HTML字体大小就设置为 80 px,即1rem = 80px, 24rem = 1920px
  • body字体大小设置为 16px。
  • 安装 cssrem 插件, root font size 设置为 80px。

方法二,使用CSS3中的scale函数来缩放网页

根元素

 .screen {
   display: inline-block;
   width: 1920px;  //设计稿的宽度
  height: 1080px;  //设计稿的高度
   transform-origin: 0 0;
  position: absolute;
   left: 50%;
  top: 50%;
}

react

  // useEffect(() => {
  //   const handleScreenAuto = () => {
  //     const designDraftWidth = 1920; // 设计稿的宽度
  //     const designDraftHeight = 1080; // 设计稿的高度
  //     // 根据屏幕的变化适配的比例
  //     const scale =document.documentElement.clientWidth /document.documentElement.clientHeight <designDraftWidth / designDraftHeight? document.documentElement.clientWidth / designDraftWidth: document.documentElement.clientHeight / designDraftHeight;
  //     const screenElement = document.querySelector('#screen') as HTMLElement;
  //     if (screenElement) {
  //       screenElement.style.transform = `scale(${scale}) translate(-50%, -50%)`;
  //     }
  //   };
  //   // 调用一次以确保初始样式正确设置
  //   handleScreenAuto();

  //   // 监听窗口大小变化事件,并触发自动适配函数
  //   window.onresize = handleScreenAuto;

  //   // 组件卸载时清除事件监听器
  //   return () => {
  //     window.onresize = null;
  //   };
  // }, []); // useEffect 依赖项为空数组,表示仅在组件挂载和卸载时执行一次

这种方法两侧可能会留白,用背景图填充上

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C/C++ 配置 jemalloc 的一些选项,处理一些疑似内存泄漏的问题。

在 jemalloc 之中有三种配置 jemalloc 选项的一些方式。 1、修改选项代码默认值&#xff08;重新编译&#xff09; 2、修改环境变量 MALLOC_CONF&#xff0c;并重启应用程序 注意&#xff1a; 仅支持 opt. 节配置选项 export MALLOC_CONF"retain:true,dirty_decay_ms:2…

什么是图神经网络?

什么是图神经网络&#xff1f; GNN 将深度学习的预测能力应用于丰富的数据结构&#xff0c;这些数据结构将对象及其关系描述为图中由线连接的点。 当两种技术融合时&#xff0c;它们可以创造出新奇而美妙的东西——比如手机和浏览器融合在一起打造智能手机。 如今&#xff0…

初学网络编程

网络编程是指编写能够在网络环境中运行&#xff0c;进行数据通信的程序的过程。它涵盖了从建立网络连接、发送和接收数据&#xff0c;到关闭连接等一系列操作。网络编程是开发网络应用程序的基础&#xff0c;它使得不同的计算机和设备能够通过网络进行数据交换和通信。 三个核…

《手把手教你》系列基础篇(八十三)-java+ selenium自动化测试-框架设计基础-TestNG测试报告-下篇(详解教程)

宏哥微信粉丝群&#xff1a;https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入 1.简介 其实前边好像简单的提到过测试报告&#xff0c;宏哥觉得这部分比较重要&#xff0c;就着重讲解和介绍一下。报告是任何测试执行中最重要的部分&#xff0c;因为它可以帮助用户了…

Flask快速搭建文件上传服务与接口

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、需求背景 前端通过浏览器&#xff0c;访问后端服务器地址&#xff0c;将目标文件进行上传。 访问地址&#xff1a;http://127.0.0…

Java 中文官方教程 2022 版(三)

原文&#xff1a;docs.oracle.com/javase/tutorial/reallybigindex.html 对象 原文&#xff1a;docs.oracle.com/javase/tutorial/java/javaOO/objects.html 一个典型的 Java 程序会创建许多对象&#xff0c;正如您所知&#xff0c;这些对象通过调用方法进行交互。通过这些对象…

前端开发攻略---简化响应式设计:利用 SCSS 优雅管理媒体查询

1、演示 2、未优化前的代码 .header {width: 100px;height: 100px;background-color: red; } media (min-width: 320px) and (max-width: 480px) {.header {width: 10px;} } media (min-width: 320px) and (max-width: 480px) {.header {height: 20px;} } media (min-width: 48…

详细介绍微信小程序app.js

这一节&#xff0c;我们详细介绍app.js 这个文件。这个文件的重要性我就不再赘述&#xff0c;前面已经介绍了。 一、app.js是项目的主控文件 任何一个程序都是需要一个入口的&#xff0c;就好比我们在学c的时候就会有一个main函数&#xff0c;其他语言基本都是一样。很明确的…

隆道商机订阅服务|“您有一条新的商机,请注意查收”

隆道商机订阅服务 自定义关键词&#xff0c;智能甄别商机&#xff0c;随时随地查看&#xff0c;多平台实时推送。 核心功能 商机无限查 您可以根据不同的维度&#xff0c;如项目类型、项目地区等&#xff0c;对招标采购信息进行查询和筛选&#xff0c;以精准查找全网范围内的…

【Spring源码】JDBC数据源访问实现

一、阅读线索 开始我们今天的对Spring的【模块阅读】&#xff0c;来看看Data Access的JDBC模块是怎么设计的。 源码阅读前&#xff0c;我们要先思考下本次的阅读线索&#xff1a; JDBC模块有什么作用该模块是怎么设计的我们从这个模块可以学到什么 二、探索 关于阅读线索一…

Python实现BOA蝴蝶优化算法优化Catboost回归模型(CatBoostRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蝴蝶优化算法(butterfly optimization algorithm, BOA)是Arora 等人于2019年提出的一种元启发式智能算…

十分钟到底能不能讲明白ROS到底能做啥

总结 录完视频发现十分钟不能&#xff0c;总共花了20分钟。 提纲&#xff1a; 课程、竞赛、论文Linux、C、Python、Github和ROS关联性强平台-资格和ROS关联性弱速度-成绩路径规划-全局和局部全局-侧重路径长短-找一条最优&#xff08;短&#xff09;的路局部-侧重速度控制-用…

数据可视化-ECharts Html项目实战(10)

在之前的文章中&#xff0c;我们学习了如何在ECharts中编写雷达图&#xff0c;实现特殊效果的插入运用&#xff0c;函数的插入&#xff0c;以及多图表雷达图。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&…

Python基于Django的微博热搜、微博舆论可视化系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

host文件nginx代理 综合理解

之前一直理解得很糙 导致遇到问题很迷糊 今天经过大佬两句话讲明白了 特此记录 host文件 首先host做了代理 也就是对浏览器的DNS寻址做了拦截 具体原理可以参照当我们在地址栏输入URL的时候浏览器发生了什么 例如127.0.0.1 www.baidu.com 将 127.0.0.1 www.baidu.com 链接自…

春游江淮|出发,上宁国“村游”去

竹川村、赤岸村打卡佳处&#xff0c;春花烂漫,春意盎然,胡乐镇竹川村、赤岸村的油菜花,是宁国春天不可错过的风光。等大片大片的油菜花盛放,与悠悠远山交相辉映,可以来此骑行、散步,静静欣赏美好的春日风光。 山门村 世外桃源经过奇特的“山门洞”,来到山门村,村内古木参天,在春…

Cloudshark数据包分析功能介绍

什么是CloudShark CloudShark是一种基于Web的数据包分析平台&#xff0c;可以认为是wiresshark的cloud版本&#xff0c;但是其在威胁分析等方面比Wireshark的功能强大&#xff0c;如下是他们的主要区别。 Wireshark VS Cloudshark Wireshark定位是一款本地开源的网络数据包分…

2024年第十四届MathorCup数学应用挑战赛B题解题思路

B题https://mbd.pub/o/bread/ZZ6Wm5dx 问题1:对于附件I(Pre_test文件夹)给定的三张甲骨文原始拓片图 片进行图像预处理&#xff0c;提取图像特征&#xff0c;建立甲骨文图像预处理模型&#xff0c;实现对 甲骨文图像干扰元素的初步判别和处理。 针对问题1&#xff0c;对于附件…

考虑预同步的虚拟同步机T型三电平逆变器并离网MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 三相 T 型三电平逆变器电路如图所示&#xff0c;逆变器主回路由三个单相 T 型逆变器组成。 直流侧输入电压为 UPV&#xff0c;直流侧中点电位 O 设为零电位&#xff0c;交流侧输出侧是三相三线制连…

Linux的学习之路:6、Linux编译器-gcc/g++使用

摘要 本文主要是说一些gcc的使用&#xff0c;g和gcc使用一样就没有特殊讲述。 目录 摘要 一、背景知识 二、gcc如何完成 1、预处理(进行宏替换) 2、编译&#xff08;生成汇编&#xff09; 3、汇编&#xff08;生成机器可识别代码 4、链接&#xff08;生成可执行文件或…