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

CSS响应式布局实现1920屏幕1rem等于100px

news 2025/7/8 6:15:40

代码解析与实现

设置根元素的 font-size 为 5.208333vw

假设你想让根元素的 font-size 基于视口宽度来动态调整。我们可以通过设置 font-size 为 5.208333vw 来让 1rem 相当于视口宽度的 5.208333%。

  • 计算 5.208333vw: 当屏幕宽度为 1920px 时，5.208333vw 等于 5.208333% 的 1920px，即 5.208333 * 1920px ≈ 100px。
设置 body 元素的 font-size 为 0.16rem

通过将 body 的字体大小设置为 0.16rem，此时 body 的实际字体大小是根元素字体大小的 0.16 倍。假设根字体大小是 100px，则 body 的字体大小为 0.16 * 100px = 16px。

完整的代码实现

// 设置根元素的字体大小（根据视口宽度调整）
document.body.parentNode.style.cssText = `font-size: ${5.208333}vw`; // 设置 body 元素的字体大小为 0.16rem，相当于根元素字体大小的 0.16 倍
document.body.style.cssText = 'font-size: 0.16rem';

解释

  1. 根元素的字体大小：

    document.body.parentNode.style.cssText = `font-size: ${5.208333}vw`;
    • 这行代码将根元素（<html>）的 font-size 设置为 5.208333vw。
    • 5.208333vw 是相当于视口宽度的 5.208333%。因此，屏幕宽度为 1920px 时，5.208333vw 等于 100px。

  2. body 元素的字体大小：

    document.body.style.cssText = 'font-size: 0.16rem';
    • 这行代码将 body 元素的字体大小设置为 0.16rem。假设根元素的字体大小是 100px，那么 body 元素的字体大小为 0.16 * 100px = 16px。

示例效果

  1. 当屏幕宽度为 1920px 时：

    • 根元素的 font-size 为 100px（5.208333vw）。
    • body 元素的 font-size 为 16px（0.16rem）。

  2. 当屏幕宽度缩小到例如 960px 时：

    • 根元素的 font-size 将变为 5.208333vw（960 * 5.208333 / 100 = 53.333px）。
    • body 元素的 font-size 为 0.16rem，即 53.333px * 0.16 = 8.533px。

小结

  • 通过设置 font-size: 5.208333vw 来让根元素的字体大小根据视口宽度动态变化。
  • 使用 0.16rem 设置 body 的字体大小，意味着 body 的字体大小将始终是根元素字体大小的 0.16 倍。
  • 这种方法适用于响应式布局，确保在不同屏幕宽度下能够动态调整页面元素的字体大小。

相关文章：

CSS响应式布局实现1920屏幕1rem等于100px

代码解析与实现 设置根元素的 font-size 为 5.208333vw 假设你想让根元素的 font-size 基于视口宽度来动态调整。我们可以通过设置 font-size 为 5.208333vw 来让 1rem 相当于视口宽度的 5.208333%。 计算 5.208333vw: 当屏幕宽度为 1920px 时&#xff0c;5.208333vw 等于 5…...

编程日记 2024/11/15 13:45:06

根据当前浏览器版本，下载或更新驱动文件为对应的版本

以前通过ChromeDriverManager().install()的方式自动下载驱动的方式&#xff0c;现在行不通了&#xff0c;访问不通下载网址&#xff0c;会报错&#xff1a;requests.exceptions.ConnectionError: Could not reach host. Are you offline? 所以想着换一个下载地址和方式&…...

编程日记 2024/11/15 13:41:58

【轻量化】YOLOv10 更换骨干网络之 MobileNetv4 | 模块化加法！非 timm 包！

之前咱们在这个文章中讲了timm包的加法，不少同学反馈要模块化的加法，那么这篇就讲解下模块化的加法，值得注意的是，这样改加载不了mobilebnetv4官方开源的权重了~ 论文地址：https://arxiv.org/pdf/2404.10518 代码地址：https://github.com/tensorflow/models/blob/master…...

编程日记 2024/11/15 13:40:57

人体存在感应器设置时间开启感应人存在开灯,失效

环境&#xff1a; 领普人体存在感应器 问题描述&#xff1a; 人体存在感应器设置时间开启感应人存在开灯,失效&#xff0c;设置下午5点&#xff0c;如果有人在5点前一直在这个区域&#xff0c;这个时候到了5点&#xff0c;就触发不了感应自动打开灯光。 解决方案&#xff1a…...

编程日记 2024/11/15 13:38:55

2024年09月CCF-GESP编程能力等级认证Python编程二级真题解析

本文收录于专栏《Python等级认证CCF-GESP真题解析》，专栏总目录：点这里，订阅后可阅读专栏内所有文章。 一、单选题（每题 2 分，共 30 分） 第 1 题 据有关资料，山东大学于1972年研制成功DJL-1计算机，并于1973年投入运行，其综合性能居当时全国第三位。DJL-1计算机运算控…...

编程日记 2024/11/15 13:37:54

Vuex vs Pinia:新一代Vue状态管理方案对比

引言 随着Vue生态系统的不断发展&#xff0c;状态管理已经成为现代Vue应用程序中不可或缺的一部分。Vuex作为Vue官方的状态管理方案&#xff0c;一直是开发者的首选。然而&#xff0c;随着Pinia的出现&#xff0c;为Vue开发者带来了新的选择。本文将深入对比这两个状态管理方案…...

编程日记 2024/11/15 13:34:51

es查询报错：too_many_buckets_exception

故障排除 es查询报错&#xff1a;too_many_buckets_exception {"error":{"root_cause":[],"type":"search_phase_execution_exception","reason":"","phase":"fetch","grouped":…...

编程日记 2024/11/15 13:32:43

outlook邮箱关闭垃圾邮件——PowerAutomate自动化任务

微软邮箱反垃圾已经很强大了非常敏感&#xff0c;自家的域名的邮件都能给扔到垃圾邮箱里&#xff0c;但还是在本地增加了一层垃圾邮箱功能&#xff0c;然后垃圾邮箱并没有提示&#xff0c;导致错过很多通知&#xff0c;本身并没有提供关闭的功能&#xff0c;但微软有个Microsof…...

编程日记 2024/11/15 13:29:35

机器学习（七）——集成学习（个体与集成、Boosting、Bagging、随机森林RF、结合策略、多样性增强、多样性度量、Python源码）

目录 关于1 个体与集成2 Boosting3 Bagging与随机森林4 结合策略5 多样性X 案例代码X.1 分类任务-Adaboost-SVMX.1.1 源码X.1.2 数据集&#xff08;鸢尾花数据集&#xff09;X.1.3 模型效果 X.2 分类任务-随机森林RFX.2.1 源码X.2.2 数据集&#xff08;鸢尾花数据集&#xff09…...

编程日记 2024/11/15 13:27:32

vue跳转传参

path 跳转只能使用 query 传参 ,name 跳转都可以 params &#xff1a;获取来自动态路由的参数 query &#xff1a;获取来自 search 部分的参数...

编程日记 2024/11/15 13:22:28

初识Linux · 共享内存

目录 理解共享内存 Shared memmory code 理解共享内存 前文介绍的管道方式的通信&#xff0c;本文介绍的是进程通信的另外一种方式&#xff0c;即共享内存。但是这种通信方式的特点是只能本地通信&#xff0c;并且不像管道那样有保护机制&#xff0c;这里是没有的。 我们通…...

编程日记 2024/11/15 13:21:27

Illumina测序什么时候会测序到接头序列？

Storage-D: 一个支持实用及个性化 DNA 数据存储的用户友好型平台 iMeta主页&#xff1a;http://www.imeta.science 方法论文 ● 期刊&#xff1a;iMeta&#xff08;IF 23.7&#xff09; ● 原文链接DOI: https://doi.org/10.1002/imt2.168 ● 2024年1月21日&#xff0c;中国…...

编程日记 2024/11/15 13:19:25

Element表格show-overflow-tooltip属性

表格默认情况下若内容过多会折行显示&#xff0c;若需要单行显示可以使用show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 <el-table v-loading"loading" :data"list"…...

编程日记 2024/11/15 13:18:24

蓝桥杯竞赛单片机组备赛【经验帖】

本人获奖情况说明 笔者本人曾参加过两次蓝桥杯电子赛&#xff0c;在第十二届蓝桥杯大赛单片机设计与开发组获得省级一等奖和国家级二等奖&#xff0c;在第十五届嵌入式设计开发组获得省级二等奖。如果跟着本帖的流程备赛&#xff0c;只要认真勤奋&#xff0c;拿个省二绝对没问…...

编程日记 2024/11/15 13:17:22

解密复杂系统：理论、模型与案例(3)

第五章&#xff1a;复杂系统的应用案例 复杂系统理论在多个领域中展现出其独特的分析能力和广泛的应用前景。本章将详细探讨复杂系统在生态系统、经济与金融系统、社会网络以及生物系统中的具体应用&#xff0c;通过丰富的案例分析&#xff0c;揭示复杂系统理论在实际问题解决…...

编程日记 2024/11/15 13:15:19

＜项目代码＞YOLOv8 番茄识别＜目标检测＞

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…...

编程日记 2024/11/15 13:13:16

docker安装到D盘

双击安装docker默认是安装在c盘&#xff0c;并且安装时我们没法选择位置&#xff0c;如果我们要安装在其他盘可以通过命令行安装 1、下载docker https://docs.docker.com/desktop/setup/install/windows-install/ Docker Desktop 可以使用 WSL 和 Hyper-V任意一种架构&#xf…...

编程日记 2024/11/15 13:12:14

【Java语言】String类

在C语言中字符串用字符可以表示&#xff0c;可在Java中有单独的类来表示字符串&#xff08;就是String&#xff09;&#xff0c;现在我来介绍介绍String类。 字符串构造 一般字符串都是直接赋值构造的&#xff0c;像这样&#xff1a; 还可以这样构造&#xff1a; 图更能直观的…...

编程日记 2024/11/15 13:11:12

【go从零单排】Directories、Temporary Files and Directories目录和临时目录、临时文件

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;path/filepath 包提供了一组用于处理文件路径的函数&am…...

编程日记 2024/11/15 13:10:11

Diff 算法的误判

起源&#xff1a; for循环的:key的值使用index绑定&#xff0c;当循环列表条目变化更新&#xff0c;导致虚拟 DOM Diff 算法认为原有项被替换&#xff0c;而不是更新。 // vue2写法 错误例子 <template><div><button click"addItem">添加项目<…...

编程日记 2024/11/15 13:09:08

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/7/7 0:41:18

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/7/7 19:52:29

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/7/6 2:27:06

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/7/7 18:23:46

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/7/7 11:09:32

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/1 6:09:06

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/7/6 10:53:20

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/7/3 9:50:42

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/7/7 1:04:44

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/6/20 15:48:55