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

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

相关文章:

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…...

数字化时代的智能支持:亚马逊云科技轻量应用服务器技术领先

轻量应用服务器是一种简化运维、门槛低的弹性服务器&#xff0c;它的"轻"主要体现在几个方面&#xff1a;开箱即用、应用优质、上手简洁、投入划算、运维简便以及稳定可靠。相较于普通的云服务器&#xff0c;轻量应用服务器简化了云服务的操作难度、使用和管理流程&a…...

【智慧之窗】AI驱动产品探索

一.初识 ChatGPT ChatGPT 是由 OpenAI 开发的自然语言处理&#xff08;NLP&#xff09;模型&#xff0c;基于 GPT&#xff08;Generative Pre-trained Transformer&#xff09;架构。GPT 系列的模型旨在理解和生成自然语言文本。ChatGPT 专注于支持对话性任务&#xff0c;即与…...

BBS项目--登录

BBS阶段性测试总要求 django登录报错 Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。 原因分析&#xff1a;出现这种情况在Windows中很常见&#xff0c;就是端口被占用 解决措施&#xff1a;这时我们只需改一下端口便可以了 登录前端页面(HTML…...

Python---TCP服务端程序开发

1. 开发 TCP 服务端程序开发步骤回顾 创建服务端端套接字对象绑定端口号设置监听等待接受客户端的连接请求接收数据发送数据关闭套接字 2. socket 类的介绍 导入 socket 模块import socket 创建服务端 socket 对象socket.socket(AddressFamily, Type) 参数说明: AddressF…...

回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 (多指标,多图)

回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 &#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GWO-DHKELM基于灰狼算法优化深度混合核极限学习机的数据回归预测 &#xff08;多指标&#xff0c;多图&#…...

听GPT 讲Rust源代码--src/tools(15)

File: rust/src/tools/rust-analyzer/crates/mbe/src/token_map.rs 在Rust源代码中&#xff0c;rust/src/tools/rust-analyzer/crates/mbe/src/token_map.rs文件的作用是实现了一个能够将输入的文本映射为标记的结构。具体来说&#xff0c;它定义和实现了几个结构体&#xff08…...

python可以做小程序研发嘛,python能做微信小程序吗

大家好&#xff0c;给大家分享一下python可以做微信小程序开发吗&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 大家好&#xff0c;给大家分享一下用python编写一个小程序&#xff0c;很多人还不知道这一点。下面详细解释一下用python代码…...

创建型模式 | 单例模式

一、单例模式 单例模式(Singleton Pattern)&#xff0c;使用最广泛的设计模式之一。其意图是保证一个类仅有一个实例被构造&#xff0c;并提供一个访问它的全局访问接口&#xff0c;该实例被程序的所有模块共享。 1、饿汉式 1.1、基础版本 在程序启动后立刻构造单例&#xff0…...

【无标题】欢迎使用Markdown编辑器

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...

Postgresql中PL/pgSQL的游标、自定义函数、存储过程的使用

场景 Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句&#xff1a; Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句-CSDN博客 上面讲了基本语法&#xff0c;下面记录游标、自定义函数、存储过程的使用。 …...

【IDEA】Intellij IDEA相关配置

IDEA 全称 IntelliJ IDEA&#xff0c;是java编程语言的集成开发环境。IntelliJ在业界被公认为最好的Java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超…...

GD32移植STM32工程(因为懒,所以移植)

文章目录 一、前言二、差异性三、软件移植部分1.前期准备1.1 安装GD32固件库1.2 选择所用芯片 2.修改程序2.1 启动时间&#xff08;内部时钟可不改&#xff09;2.2 主频2.2.1 系统时钟配置2.2.2 108MHz宏定义第一处第二处第三处第四处第五处 2.2.3 串口2.2.4 FLASH 四、总结 一…...

mt5和mt4交易软件有什么区别?

MetaTrader 4&#xff08;MT4&#xff09;和MetaTrader 5&#xff08;MT5&#xff09;是两种广泛使用的外汇和金融市场交易平台&#xff0c;由MetaQuotes公司开发。尽管它们都是外汇交易的常见选择&#xff0c;但在功能和特性上存在一些区别。以下是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 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于Django与深度学习的股票预测系统 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff…...

Linux下RTL8188无线网卡变身AP热点:从驱动安装到自动分配IP全流程(附避坑指南)

Linux下RTL8188无线网卡配置AP热点全攻略&#xff1a;从驱动到自动IP分配的实战指南 在嵌入式开发和物联网应用中&#xff0c;将无线网卡配置为接入点&#xff08;AP&#xff09;是常见需求。RTL8188系列USB无线网卡因其高性价比和广泛兼容性&#xff0c;成为开发者的热门选择。…...

手把手教你为i.MX6ULL开发板适配非标准分辨率LCD(以1024x600 OV5640为例)

i.MX6ULL开发板非标准分辨率LCD适配实战&#xff1a;从寄存器配置到图像稳定输出 在嵌入式视觉系统开发中&#xff0c;摄像头与显示设备的适配往往成为项目落地的关键瓶颈。当面对非标准分辨率的LCD屏幕时&#xff0c;开发者需要深入理解图像采集与显示的全链路原理&#xff0c…...

嵌入式通信协议SPI/I2C/UART原理与应用

嵌入式通信协议原理图解与技术解析1. 串行通信协议基础1.1 SPI通信协议SPI(Serial Peripheral Interface)是一种全双工、同步串行通信协议&#xff0c;采用主从架构设计。其核心特点包括&#xff1a;四线制结构&#xff1a;SCLK(时钟)、MOSI(主出从入)、MISO(主入从出)、SS(片选…...

Souliss嵌入式状态同步框架:轻量级去中心化智能家居通信实践

1. Souliss 智能家居网络框架深度解析&#xff1a;面向嵌入式工程师的底层通信架构实践指南Souliss 是一个专为资源受限嵌入式节点设计的轻量级、去中心化智能家居网络框架。其核心目标并非构建通用物联网平台&#xff0c;而是解决真实家庭场景中多协议共存、低功耗节点协同、边…...

OpenClaw+Qwen3.5-4B-Claude:个人知识库自动更新系统

OpenClawQwen3.5-4B-Claude&#xff1a;个人知识库自动更新系统 1. 为什么需要自动化知识管理 作为一个技术从业者&#xff0c;我每天都会接触到大量信息——技术博客、论文摘要、行业动态、代码库更新等等。过去三年里&#xff0c;我尝试过各种笔记工具和知识管理方法&#…...

一条命令搞定STM32程序下载:OpenOCD program命令的隐藏用法与避坑指南

STM32极速烧录秘籍&#xff1a;OpenOCD program命令高阶玩法全解析 每次调试STM32都要重复点击IDE的下载按钮&#xff1f;CI/CD流水线卡在烧录环节&#xff1f;是时候解锁OpenOCD的program命令了——这个被低估的"瑞士军刀"能让你用一行命令完成擦除、烧录、校验、复…...

半导体放电管TSS选型避坑指南:从RS485到CAN接口的实战经验分享

半导体放电管TSS选型避坑指南&#xff1a;从RS485到CAN接口的实战经验分享 在工业通信设备的电路保护设计中&#xff0c;浪涌防护是一个不可忽视的关键环节。作为一名长期奋战在一线的硬件工程师&#xff0c;我深知半导体放电管&#xff08;TSS&#xff09;选型过程中的种种陷阱…...

储能系统中的双向DCDC变流器:模型预测控制下的高效稳定运行策略

储能双向DCDC变流器-模型预测控制 储能buck-boost双向dcdc负载 [1]初级控制为下垂控制 [2]电压环才采用PI控制 [3]电流环采用模型预测 ①蓄电池控制外环使用U-I下垂控制PI控制器产生电流环给定值 ②设计了电流内环的模型预测控制器&#xff0c;模型预测控制由于是主动的预测&am…...

Linux 内核模块编程入门

Linux 内核模块编程入门 内核模块的重要性 作为科技创业者&#xff0c;我深刻理解内核模块在系统开发中的灵活性和强大功能。内核模块允许我们在不重新编译整个内核的情况下&#xff0c;动态地添加或移除功能。这种机制不仅加快了开发迭代速度&#xff0c;还为产品定制化提供了…...

避开这些坑!高德DragRoute插件获取路线坐标的5个常见问题解决方案

高德地图DragRoute插件实战&#xff1a;路线坐标获取的深度避坑指南 当开发者需要在地图上绘制复杂路线时&#xff0c;高德地图的DragRoute插件无疑是个强大工具。但在实际项目中&#xff0c;从简单的A到B路径绘制&#xff0c;到包含多个途经点的复杂路线坐标获取&#xff0c;开…...