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

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

news 2025/8/26 21:39:27

代码解析与实现

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

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/8/22 2:46:24

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/8/3 2:20:04

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/8/22 4:32:39

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

编程新知 2025/7/30 2:41:23

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2025/8/24 19:51:39

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2025/8/25 0:22:36

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

编程新知 2025/8/22 11:59:07