CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem:大屏高宽自适应问题

前言

继上篇《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem》。
发现一个有趣的问题,文件 rem.js 中按照宽度设置自适应,适用于大多数页面,但当遇到大屏就不那么合适了。

问题

使用宽度,注意代码第2 和 4 行:

    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16const screenWidth = 1920const scale = screenWidth / 16const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小htmlDom.style.fontSize = htmlWidth / scale + 'px'

如下图,左右卡片的底部因内容较多而溢出。这是按照宽度设置的,html font-size 较大。

,
解决方案:注意差异也在代码第 2和 4 行,此时已改为按照高度计算:

    // 按高度来const screenHeight = 1080const scale = screenHeight / 16const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小htmlDom.style.fontSize = htmlHeight / scale + 'px'

在这里插入图片描述

总结

关键点就在最后的值 htmlDom.style.fontSize。它决定了rempx 的转换。需根据系统的设计来做相应处理。有时甲方需要在异屏(2880*1800)系统上展示,也可固定 htmlDom.style.fontSize 的值,如直接赋值为 16px

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

补题与周总结:leetcode第 376 场周赛

文章目录 复盘与一周总结2967. 使数组成为等数数组的最小代价(中位数贪心 回文数判断)2968. 执行操作使频率分数最大(中位数贪心 前缀和 滑窗) 复盘与一周总结 wa穿了第3题,赛时其实想到了思路:中位数贪心…

C#上位机与欧姆龙PLC的通信03----创建项目工程

1、创建仿真PLC 这是一款CP1H-X40DR-A的PLC,呆会后面创建工程的时候需要与这个类型的PLC类型一致,否则程序下载不到PLC上。 2、创建虚拟串口 首先安装,这个用来创建虚拟串口来模拟真实的串口,也就是上位机上有那种COM口&#xf…

【SplaTAM】基于RGB-D类型SplaTAM的定位与重建

SplaTAM ubuntu配置与运行记录 1. 资料收集2. 环境配置与运行注意问题3. 在线运行 近期各种定会涌现出一种新的基于高斯的方法,备受关注,这里我们也来学习下sota效果的slam用于定位和重建。 1. 资料收集 coda link3D Gaussians 2.1 Dynamic 3D Gaussian…

百度侯震宇:AI原生与大模型将从三个层面重构云计算

12月20日,2023百度云智大会智算大会在北京举办,大会以「大模型重构云计算,Cloud for AI」为主题,深度聚焦大模型引发的云计算变革。 百度智能云表示,为满足大模型落地需求,正在基于「云智一体」战略重构…

linux 驱动——私有数据

文章目录 linux 驱动中的私有数据container_of驱动程序数据结构定义 应用程序模块使用 linux 驱动中的私有数据 前面的程序中,都只申请了一个从设备号,这里使用 alloc_chrdev_region 分配两个设备号,这两个设备共用 ops 方法。 所以需要在 …

企业网络常用技术-快速生成树RSTP原理与配置

STP协议虽然能够解决环路问题,但是收敛速度慢,影响了用户通信质量。如果STP网络的拓扑结构频繁变化,网络也会频繁失去连通性,从而导致用户通信频繁中断。IEEE于2001年发布的802.1w标准定义了快速生成树协议RSTP(Rapid …

【C++高阶(八)】单例模式特殊类的设计

💓博主CSDN主页:杭电码农-NEO💓   ⏩专栏分类:C从入门到精通⏪   🚚代码仓库:NEO的学习日记🚚   🌹关注我🫵带你学习C   🔝🔝 单例模式 1. 前言2. 设计一个不能被拷贝/继承的…

3d游戏公司选择云电脑进行云办公有哪些优势

随着游戏行业的不断发展,很多的游戏制作公司也遇到了很多的难题,比如硬件更换成本高、团队协同难以及效率低下等问题,那么如何解决游戏行业面临的这些行业痛点,以及游戏制作公司选择云电脑进行云办公有哪些优势?一起来…

麒麟V10 ARM 离线生成RabbitMQ docker镜像并上传Harbor私有仓库

第一步在外网主机执行: docker pull arm64v8/rabbitmq:3.8.9-management 将下载的镜像打包给离线主机集群使用 在指定目录下执行打包命令: 执行: docker save -o rabbitmq_arm3.8.9.tar arm64v8/rabbitmq:3.8.9-management 如果懒得打包…

A01、关于jvm执行子系统

1、Class 类文件结构 1.1、Java跨平台的基础 各种不同平台的虚拟机与所有平台都统一使用的程序存储格式——字节码(ByteCode)是构成平台无关性的基石,也是语言无关性的基础。Java虚拟机不和包括Java在内的任何语言绑定,它只与 “…

OpenCV消除高亮illuminationChange函数的使用

学更好的别人, 做更好的自己。 ——《微卡智享》 本文长度为1129字,预计阅读4分钟 导语 上一篇《OpenCV极坐标变换函数warpPolar的使用》中介绍了极坐标变换的使用,文中提到过因为手机拍的照片,部分地方反光厉害。OpenCV本身也有一…

FFmepeg——视频处理工具安装以及简单命令学习。

FFmpeg 是一个免费、开源且高度可定制的多媒体处理工具,它是一个强大的跨平台框架,用于处理音频、视频、多媒体流和图像。FFmpeg 的主要功能包括解码、编码、转码、流处理、多路复用、分离、合并、过滤等,支持多种音视频格式,包括…

外卖系统海外版:技术智能引领全球美食新潮流

随着全球数字化浪潮的推动,外卖系统海外版不仅是食客们品味美食的便捷通道,更是技术智能在美食领域的引领者。本文将深入剖析其背后的技术实现,揭开代码带来的美食革新。 多语言支持:构建全球美食沟通桥梁 def multilingual_su…

排序算法——快排

快速排序算法最早是由图灵奖获得者Tony Hoare设计出来的,他在形式化方法理论以 及ALGOL.60编程语言的发明中都有卓越的贡献,是20世纪最伟大的计算机科学家之—。 而这快速排序算法只是他众多贡献中的—个小发明而已。 快速排序(Quick Sort)的基本算法思…

最新国内可用使用GPT4.0,GPT语音对话,Midjourney绘画,DALL-E3文生图

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画,相信对大家应该不感到陌生吧?简单来说,GPT-4技术比之前的GPT-3.5相对来说更加智能,会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而,GP…

2023/12/20 work

1. 使用select完成TCP客户端程序 2. 使用poll完成TCP并发服务器 3. 思维导图

智能优化算法应用:基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.水基湍流算法4.实验参数设定5.算法结果6.…

MongoDB的原子操作findAndReplace、findOneAndDelete和deleteMany

本文主要介绍MongoDB的原子操作findAndReplace、findOneAndDelete和deleteMany。 目录 MongoDB的原子操作一、findAndReplace二、findOneAndDelete三、deleteMany MongoDB的原子操作 MongoDB的原子操作指的是在单个操作中对数据库的数据进行读取和修改,并确保操作是…

OpenHarmony应用开发环境搭建指南

OpenHarmony的应用开发主要是基于Deveco Studio(目前只支持Windows及Mac平台)搭配相应的SDK进行,现对开发环境的搭建进行说明。 1:Deveco下载安装 下载对应平台的安装包即可。接下来以Windows平台为例,进行开发环境的搭建。 下载…

快速入门 — — 在Moonbeam上开发

访问熟悉的以太坊工具是一回事,获得顶级支持、拥有构建突破性跨链应用程序的资源是另一回事。 Moonbeam汇集了通过集成互操作性解决方案访问任何链的能力、具有完全以太坊兼容性的理想开发环境,以及使用Substrate在波卡上安全扩展的能力。 开始在Moonb…