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。它决定了rem 与 px 的转换。需根据系统的设计来做相应处理。有时甲方需要在异屏(2880*1800)系统上展示,也可固定 htmlDom.style.fontSize 的值,如直接赋值为 16px;
相关文章:
CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem:大屏高宽自适应问题
前言 继上篇《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem》。 发现一个有趣的问题,文件 rem.js 中按照宽度设置自适应,适用于大多数页面,但当遇到大屏就不那么合适了。 问题 使用宽度,注意代码第2 和 4 行:…...
SQL面试题挑战01:打折日期交叉问题
目录 问题:SQL解答:第一种方式:第二种方式: 问题: 如下为某平台的商品促销数据,字段含义分别为品牌名称、打折开始日期、打折结束日期,现在要计算每个品牌的打折销售天数(注意其中的…...
三大主流前端框架介绍及选型
在前端项目中,可以借助某些框架(如React、Vue、Angular等)来实现组件化开发,使代码更容易复用。此时,一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成,而是按照组件的思想将网页划分成一个个组…...
云原生消息流系统 Apache Pulsar 在腾讯云的大规模生产实践
导语 由 InfoQ 主办的 Qcon 全球软件开发者大会北京站上周已精彩落幕,腾讯云中间件团队的冉小龙参与了《云原生机构设计与音视频技术应用》专题,带来了以《云原生消息流系统 Apache Pulsar 在腾讯云的大规模生产实践》为主题的精彩演讲,在本…...
【LeetCode刷题】--245.最短单词距离III
245.最短单词距离III class Solution {public int shortestWordDistance(String[] wordsDict, String word1, String word2) {int len wordsDict.length;int ans len;if(word1.equals(word2)){int prev -1;for(int i 0;i<len;i){String word wordsDict[i];if(word.equa…...
数字化时代的智能支持:亚马逊云科技轻量应用服务器技术领先
轻量应用服务器是一种简化运维、门槛低的弹性服务器,它的"轻"主要体现在几个方面:开箱即用、应用优质、上手简洁、投入划算、运维简便以及稳定可靠。相较于普通的云服务器,轻量应用服务器简化了云服务的操作难度、使用和管理流程&a…...
【智慧之窗】AI驱动产品探索
一.初识 ChatGPT ChatGPT 是由 OpenAI 开发的自然语言处理(NLP)模型,基于 GPT(Generative Pre-trained Transformer)架构。GPT 系列的模型旨在理解和生成自然语言文本。ChatGPT 专注于支持对话性任务,即与…...
BBS项目--登录
BBS阶段性测试总要求 django登录报错 Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。 原因分析:出现这种情况在Windows中很常见,就是端口被占用 解决措施:这时我们只需改一下端口便可以了 登录前端页面(HTML…...
Python---TCP服务端程序开发
1. 开发 TCP 服务端程序开发步骤回顾 创建服务端端套接字对象绑定端口号设置监听等待接受客户端的连接请求接收数据发送数据关闭套接字 2. socket 类的介绍 导入 socket 模块import socket 创建服务端 socket 对象socket.socket(AddressFamily, Type) 参数说明: AddressF…...
回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 (多指标,多图)
回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 (多指标,多图) 目录 回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 (多指标,多图&#…...
听GPT 讲Rust源代码--src/tools(15)
File: rust/src/tools/rust-analyzer/crates/mbe/src/token_map.rs 在Rust源代码中,rust/src/tools/rust-analyzer/crates/mbe/src/token_map.rs文件的作用是实现了一个能够将输入的文本映射为标记的结构。具体来说,它定义和实现了几个结构体(…...
python可以做小程序研发嘛,python能做微信小程序吗
大家好,给大家分享一下python可以做微信小程序开发吗,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! 大家好,给大家分享一下用python编写一个小程序,很多人还不知道这一点。下面详细解释一下用python代码…...
创建型模式 | 单例模式
一、单例模式 单例模式(Singleton Pattern),使用最广泛的设计模式之一。其意图是保证一个类仅有一个实例被构造,并提供一个访问它的全局访问接口,该实例被程序的所有模块共享。 1、饿汉式 1.1、基础版本 在程序启动后立刻构造单例࿰…...
【无标题】欢迎使用Markdown编辑器
这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...
Postgresql中PL/pgSQL的游标、自定义函数、存储过程的使用
场景 Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句: Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句-CSDN博客 上面讲了基本语法,下面记录游标、自定义函数、存储过程的使用。 …...
【IDEA】Intellij IDEA相关配置
IDEA 全称 IntelliJ IDEA,是java编程语言的集成开发环境。IntelliJ在业界被公认为最好的Java开发工具,尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超…...
GD32移植STM32工程(因为懒,所以移植)
文章目录 一、前言二、差异性三、软件移植部分1.前期准备1.1 安装GD32固件库1.2 选择所用芯片 2.修改程序2.1 启动时间(内部时钟可不改)2.2 主频2.2.1 系统时钟配置2.2.2 108MHz宏定义第一处第二处第三处第四处第五处 2.2.3 串口2.2.4 FLASH 四、总结 一…...
mt5和mt4交易软件有什么区别?
MetaTrader 4(MT4)和MetaTrader 5(MT5)是两种广泛使用的外汇和金融市场交易平台,由MetaQuotes公司开发。尽管它们都是外汇交易的常见选择,但在功能和特性上存在一些区别。以下是MT4和MT5之间的主要区别&…...
零刻EQ12 N100 双2.5G网口 All In One新手教程
零刻EQ12 N100 双2.5G网口 All In One新手教程 前言1.硬件配置2.准备工作2.1. ESXI8.0U2镜像2.2. Rufus磁盘工具下载2.3. ikuai镜像下载2.4. StarWindConverter虚拟磁盘格式转换工具下载2.5. OpenWrt镜像下载2.6. 黑群晖RR引导镜像下载(DSM7.2)2.7. 需要准备的硬件2.8. 格式化需…...
竞赛保研 基于Django与深度学习的股票预测系统
文章目录 0 前言1 课题背景2 实现效果3 Django框架4 数据整理5 模型准备和训练6 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 **基于Django与深度学习的股票预测系统 ** 该项目较为新颖,适合作为竞赛课题方向ÿ…...
zotero-style:智能文献管理在学术研究中的创新实践
zotero-style:智能文献管理在学术研究中的创新实践 【免费下载链接】zotero-style zotero-style - 一个 Zotero 插件,提供了一系列功能来增强 Zotero 的用户体验,如阅读进度可视化和标签管理,适合研究人员和学者。 项目地址: ht…...
通义千问3-Reranker-0.6B效果惊艳:数学证明步骤间逻辑连贯性重排序
通义千问3-Reranker-0.6B效果惊艳:数学证明步骤间逻辑连贯性重排序 1. 模型介绍与核心能力 通义千问3-Reranker-0.6B是Qwen3 Embedding模型系列的最新成员,专门针对文本重排序任务进行了深度优化。这个6亿参数的模型虽然体积小巧,但在数学证…...
蓝桥杯嵌入式备赛:STM32G431引脚复用功能表,一张图搞定定时器与ADC配置
蓝桥杯嵌入式备赛:STM32G431引脚复用功能实战指南 在蓝桥杯嵌入式赛场上,STM32G431作为官方指定开发平台的核心控制器,其引脚复用功能的灵活配置往往是决定项目成败的关键。许多参赛选手在紧张激烈的比赛中,常常因为引脚配置错误…...
Qwen3-14B-Int4-AWQ助力运维智能化:日志分析与故障排查实战
Qwen3-14B-Int4-AWQ助力运维智能化:日志分析与故障排查实战 1. 运维工程师的日常痛点 凌晨三点,你的手机突然响起。系统告警显示某核心服务出现异常,你需要立即登录服务器查看日志。面对几十GB的日志文件,你不得不用grep、awk等…...
Doris从入门到上天系列第六篇:Doris中修改表的操作
一:修改表使用 ALTER TABLE 命令可以对表进行修改,包括 partition 、rollup、schemachange、rename 和 index 五种。语法:ALTER TABLE [database.]table alter_clause1[, alter_clause2, ...];alter_clause 分为 partition 、rollup、schema …...
Llama-3.2V-11B-cot部署教程:WSL2环境下双4090识别与分配验证
Llama-3.2V-11B-cot部署教程:WSL2环境下双4090识别与分配验证 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡4090环境进行了深度优化,特别适合在WSL2环境下部署使用。通过本教程…...
MAX30102传感器总是不准?Arduino避坑指南:从焊接绝缘到手指摆放的5个关键细节
MAX30102传感器精度优化全攻略:从硬件调试到算法校准的完整解决方案 MAX30102作为一款高集成度生物传感器,在心率、血氧监测领域应用广泛,但许多开发者在Arduino平台上使用时常遇到数据不稳定、测量偏差大的问题。本文将系统性地剖析影响测量…...
基于spring和vue的企业原材料库存盘点食品厂管理系统
目录技术选型与架构设计核心功能模块划分数据库设计要点关键技术实现前端交互优化系统安全措施测试与部署方案扩展性设计项目技术支持源码获取详细视频演示 :文章底部获取博主联系方式!同行可合作技术选型与架构设计 后端采用Spring Boot框架࿰…...
半导体放电管TSS选型避坑指南:从RS485到CAN接口的实战经验分享
半导体放电管TSS选型避坑指南:从RS485到CAN接口的实战经验分享 在工业通信设备的电路保护设计中,浪涌防护是一个不可忽视的关键环节。作为一名长期奋战在一线的硬件工程师,我深知半导体放电管(TSS)选型过程中的种种陷阱…...
TMSpeech:Windows端离线实时语音转文字工具的完整使用指南
TMSpeech:Windows端离线实时语音转文字工具的完整使用指南 【免费下载链接】TMSpeech 腾讯会议摸鱼工具 项目地址: https://gitcode.com/gh_mirrors/tm/TMSpeech 在数字办公和在线会议成为日常的今天,你是否曾因会议内容过多而错过关键信息&#…...
