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

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

news 2026/5/21 1:42:00

代码解析与实现

设置根元素的 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

Android 相机有线连接开发复盘：PTP/MTP 协议适配与稳定性实践

一、项目背景在做一个相机互联类 App 的过程中&#xff0c;我们需要在 Android 设备上通过 USB 有线方式​ 连接相机&#xff0c;实现&#xff1a;遥控拍摄实时获取照片稳定地进行文件同步最初评估时以为只要调用系统 API 就能跑起来&#xff0c;但实际开发中发现&#xff0c;标…...

编程新知 2026/5/21 1:08:48

【Perplexity文学研究黄金配置】：1个提示词模板+2个权威元数据过滤器+4类文学体裁专属指令集

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity文学作品查询 Perplexity 是一款以实时网络检索与引用溯源为特色的 AI 助手&#xff0c;其在人文领域尤其适用于文学研究场景。不同于传统大模型的静态知识库&#xff0c;Perplexity 在响应用户查询…...

编程新知 2026/5/21 0:58:39

创业团队如何通过Taotoken统一管理AI开发资源与成本

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 创业团队如何通过Taotoken统一管理AI开发资源与成本 对于资源有限的创业团队而言&#xff0c;在早期产品原型开发与测试阶段&#…...

编程新知 2026/5/21 0:56:37

OmenSuperHub终极指南：3步解锁暗影精灵完整性能潜力

OmenSuperHub终极指南&#xff1a;3步解锁暗影精灵完整性能潜力 【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度&#xff0c;自动解除DB功耗限制。 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 想要彻底掌控惠普暗影精灵笔记本的性能吗&…...

编程新知 2026/5/21 0:18:50

基于CMS8S6990评估板实现高精度电压电流测量：从血氧仪到通用测量工具的移植实践

1. 项目缘起与核心思路最近终于拿到了中微半导体&#xff08;CMSemicon&#xff09;正版的CMS8S6990血氧仪开发板。这块板子给我的第一印象就是“精致”&#xff0c;尺寸不大&#xff0c;但该有的接口和功能一应俱全&#xff0c;颇有点“麻雀虽小&#xff0c;五脏俱全”的味道。…...

编程新知 2026/5/20 23:16:30

pixi-editor

npm: zouchengxin/pixi-editor 在线地址&#xff1a;pixi-editor.pages.dev 还在为PixiJS缺少可视化编辑器而烦恼&#xff1f;试试 zouchengxin/pixi-editor&#xff01; 基于 PixiJS 构建的无限画布组件&#xff0c;支持画布平移、缩放&#xff0c;以及元素的拖动、旋转、缩…...

编程新知 2026/5/20 23:01:20

【行业趋势】软件测试的第三次革命：从手工、自动化到AI Agent驱动

写在前面 如果你是一名测试工程师&#xff0c;大概率经历过这样的时刻&#xff1a;凌晨两点&#xff0c;被自动化回归失败的告警吵醒&#xff0c;爬起来一看&#xff0c;又是页面改了个按钮ID&#xff0c;三百条用例全红了。修了一小时定位器&#xff0c;天亮了。 如果你是一名…...

编程新知 2026/5/20 22:53:12

别再死记硬背公式了！用Python动画直观理解SAR距离徙动（附代码）

用Python动画拆解SAR距离徙动&#xff1a;从数学恐惧到视觉理解 雷达工程师们常开玩笑说&#xff0c;合成孔径雷达&#xff08;SAR&#xff09;成像有两个门槛&#xff1a;一个是昂贵的硬件设备&#xff0c;另一个是让人望而生畏的数学公式。当我第一次看到距离徙动&#xff08…...

编程新知 2026/5/20 20:27:17

嵌入式LCD与RTC驱动实战：从时序模拟到系统整合

1. 项目概述&#xff1a;当LCD遇见RTC&#xff0c;一个经典嵌入式显示方案的深度剖析最近在整理一个老项目的资料&#xff0c;翻出来一个挺有意思的模块&#xff1a;用一块字符型LCD屏&#xff0c;搭配一颗实时时钟芯片&#xff0c;实现一个带时间显示的简易信息板。这个组合—…...

编程新知 2026/5/20 20:01:08

BooruDatasetTagManager自定义界面与快捷键：打造个性化工作流程的终极指南 [特殊字符]

BooruDatasetTagManager自定义界面与快捷键&#xff1a;打造个性化工作流程的终极指南 &#x1f3a8; 【免费下载链接】BooruDatasetTagManager 项目地址: https://gitcode.com/gh_mirrors/bo/BooruDatasetTagManager BooruDatasetTagManager是一款强大的AI训练数据标签…...

编程新知 2026/5/20 19:20:24