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

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

news 2026/3/26 23:10:17

代码解析与实现

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

先瑞达2025年年报：营收同比增长20.7% 双引擎格局成型迎高质量增长

3月26日晚间&#xff0c;先瑞达医疗&#xff08;6669.HK&#xff09;正式发布截至2025年12月31日的年度业绩报告。报告期内&#xff0c;公司紧扣血管介入治疗领域核心赛道&#xff0c;以技术创新为内核、以全球化布局为抓手、以降本增效为支撑&#xff0c;实现经营业绩的稳健增…...

编程新知 2026/3/26 22:58:49

MangoHud资源占用实时监控：图表工具终极指南

MangoHud资源占用实时监控&#xff1a;图表工具终极指南 【免费下载链接】MangoHud A Vulkan and OpenGL overlay for monitoring FPS, temperatures, CPU/GPU load and more. Discord: https://discordapp.com/invite/Gj5YmBb 项目地址: https://gitcode.com/gh_mirrors/ma/…...

编程新知 2026/3/26 22:54:40

JAVA重点基础、进阶知识及易错点总结（1）---数据类型、运算符、流程控制

&#x1f680; Java 巩固进阶 第1天 主题&#xff1a;数据类型、运算符与流程控制 —— 避开那些“隐形”的坑&#x1f4c5; 进度概览&#xff1a;重启Java基础。 &#x1f4a1; 核心价值&#xff1a;很多生产环境的Bug&#xff08;如金额精度丢失、空指针崩溃、逻辑穿透&…...

编程新知 2026/3/26 22:40:21

5分钟掌握ViGEmBus虚拟手柄驱动：Windows游戏控制器模拟终极指南

5分钟掌握ViGEmBus虚拟手柄驱动&#xff1a;Windows游戏控制器模拟终极指南 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 想要在Windows电脑上体验专业级的…...

编程新知 2026/3/26 22:16:15

2026微软SDE LeetCode高频题：208道，按频度排序，含备考建议

2026微软SDE LeetCode高频题&#xff1a;208道&#xff0c;按频度排序&#xff0c;含备考建议 微软SDE的LeetCode面试题&#xff0c;第一名不是反转链表&#xff0c;不是LRU缓存&#xff0c;而是—— 215. 数组中的第K个最大元素&#xff0c;出现14次。 我整理了基于真实面经…...

编程新知 2026/3/26 22:06:05

基于COMSOL 5.5的精确非局部损伤模型：模拟脆性材料压缩、摩擦和剪切条件下的破坏行为研究

开发了一种基于COMSOL 5.5的损伤模型&#xff0c;专门用于模拟脆性材料在压缩、摩擦和剪切条件下的破坏行为。 该模型采用非局部本构关系&#xff0c;通过考虑材料内部微观结构的影响&#xff0c;精确捕捉脆性材料在受力过程中的应力分布和破坏机理。脆性材料的破坏模拟一直是工…...

编程新知 2026/3/26 20:41:48

3个革命性功能：163MusicLyrics让音乐歌词管理效率提升10倍

3个革命性功能&#xff1a;163MusicLyrics让音乐歌词管理效率提升10倍 【免费下载链接】163MusicLyrics Windows 云音乐歌词获取【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 在数字音乐时代&#xff0c;歌词管理已成为音乐爱好…...

编程新知 2026/3/26 20:35:47

Python开发环境搭建新选择：Miniconda-Python3.11镜像体验

Python开发环境搭建新选择&#xff1a;Miniconda-Python3.11镜像体验 1. 为什么选择Miniconda-Python3.11镜像 Python作为当今最流行的编程语言之一&#xff0c;其版本管理和环境隔离一直是开发者面临的挑战。传统的Python安装方式往往会导致&#xff1a; 系统Python版本与项…...

编程新知 2026/3/26 20:19:43

DAMO-YOLO部署教程：SSL证书配置与HTTP自动跳转HTTPS设置

DAMO-YOLO部署教程&#xff1a;SSL证书配置与HTTP自动跳转HTTPS设置 1. 引言 当你成功部署了DAMO-YOLO智能视觉探测系统后&#xff0c;可能会发现浏览器提示"不安全"的警告。这是因为默认的HTTP协议缺乏加密保护&#xff0c;对于涉及图像处理的AI系统来说&#xff…...

编程新知 2026/3/26 20:07:40

机票价格智能监控：如何用Flight Spy锁定最佳购票时机

机票价格智能监控&#xff1a;如何用Flight Spy锁定最佳购票时机 【免费下载链接】flight-spy Looking for the cheapest flights and dont have enough time to track all the prices? 项目地址: https://gitcode.com/gh_mirrors/fl/flight-spy 你是否曾在预订机票时陷…...

编程新知 2026/3/26 18:56:40