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

代码解析与实现

设置根元素的 font-size5.208333vw

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

  • 计算 5.208333vw: 当屏幕宽度为 1920px 时,5.208333vw 等于 5.208333% 的 1920px,即 5.208333 * 1920px ≈ 100px
设置 body 元素的 font-size0.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-size100px5.208333vw)。
    • body 元素的 font-size16px0.16rem)。
  2. 当屏幕宽度缩小到例如 960px 时:

    • 根元素的 font-size 将变为 5.208333vw960 * 5.208333 / 100 = 53.333px)。
    • body 元素的 font-size0.16rem,即 53.333px * 0.16 = 8.533px

小结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

线性DP 区间DP C++

线性DP 题一 数字三角形 解题思路 三角形内的某个点&#xff0c;可以从这个点的左上方或右上方来到这个点&#xff0c;因此有状态转移方程&#xff1a; f[i, j] max(f[i - 1, j - 1] a[i][j], f[i - 1][j] a[i][j]) 代码实现 #include<iostream> #include<algor…

D68【python 接口自动化学习】- python基础之数据库

day68 Python执行SQL语句 学习日期&#xff1a;20241114 学习目标&#xff1a;MySQL数据库-- 137 Python执行SQL语句插入到数据库 学习笔记&#xff1a; commit提交 自动commit 总结 commit提交&#xff1a;pymysql库在执行对数据库有修改操作的行为时&#xff0c;是需要通…

【项目组件】第三方库——websocketpp

目录 第三方协议&#xff1a;websocket websocket简介 websocket特点 websocket协议切换 websocket协议格式段 websocketpp库介绍 endpoint server connection websocketpp库搭建服务器流程 基本框架实现 业务处理回调函数的实现 http_callback open_callback …

超越传统:探索ONLYOFFICE的革命性办公新纪元

目录 &#x1f341;引言 &#x1f341;一、ONLYOFFICE产品简介 &#xff08;一&#xff09;、介绍 &#xff08;二&#xff09;、基本功能简介 &#x1f341;二、核心功能具体介绍 1、编辑操作 2、文本与段落&#xff1a; 3、样式与图形&#xff1a; 4、表格与图表&…

python解析网页上的json数据落地到EXCEL

安装必要的库 import requests import pandas as pd import os import sys import io import urllib3 import json测试数据 网页上的数据结构如下 {"success": true,"code": "CIFM_0000","encode": null,"message": &quo…

115页PDF | 埃森哲_XX集团信息化能力成熟度评估及能力提升方案(限免下载)

一、前言 这份报告是埃森哲_XX集团信息化能力成熟度评估及能力提升方案&#xff0c;报告首先分析了集团的战略规划&#xff0c;包括调整优化期、转型升级期和跨越发展期的目标&#xff0c;然后识别了集团面临的内部挑战和外部压力&#xff0c;如管控体系不完善、业务板块多样化…

PostgreSQL中表的数据量很大且索引过大时怎么办

在PostgreSQL中&#xff0c;当表的数据量很大且索引过大时&#xff0c;可能会导致性能问题。以下是一些优化索引和表数据的方法&#xff1a; 1. 评估和删除不必要的索引 识别未使用的索引&#xff1a;使用pg_stat_user_indexes和pg_index系统视图来查找未被使用的索引&#x…

智谱AI清影升级:引领AI视频进入音效新时代

前几天智谱推出了新清影,该版本支持4k、60帧超高清画质、任意尺寸&#xff0c;并且自带音效的10秒视频,让ai生视频告别了"哑巴时代"。 智谱AI视频腾空出世&#xff0c;可灵遭遇强劲挑战&#xff01;究竟谁是行业翘楚&#xff1f;(附测评案例)之前智谱出世那时体验了一…

7. djang5 官网 polls app (关于管理员站点)

本教程从 第 6 个教程 结束的地方开始。我们将继续开发 web-poll 应用程序&#xff0c;并专注于自定义 Django 自动生成的管理网站&#xff0c;这一点我们在 第 2 个教程 中首次进行了探索。 自定义管理表单 在 polls/admin.py 中修改&#xff1a; from django.contrib impo…

Elasticsearch基本概念及使用

Elasticsearch 是一个开源的、分布式的全文搜索和分析引擎&#xff0c;基于 Apache Lucene 构建。它提供了快速的搜索能力&#xff0c;支持大规模的数据分析&#xff0c;广泛应用于日志分析、全文搜索、监控系统和商业智能等领域。ES操作指令是基于restAPI构建&#xff0c;也就…

无插件H5播放器EasyPlayer.js网页web无插件播放器vue和react详细介绍

EasyPlayer.js H5播放器&#xff0c;是一款能够同时支持HTTP、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WS、WEBRTC、FMP4视频直播与视频点播等多种协议&#xff0c;支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式&#xff0c;支持MSE、WASM、WebCodec等多种解码方…

Ubuntu 的 ROS 操作系统安装与测试

引言 机器人操作系统&#xff08;ROS, Robot Operating System&#xff09;是一个用于开发机器人应用的开源框架&#xff0c;它提供了一系列功能丰富的库和工具&#xff0c;能够帮助开发者构建和控制机器人。 当前&#xff0c;ROS1的最新版本为Noetic Ninjemys&#xff0c;专为…

入门网络安全工程师要学习哪些内容(详细教程)

&#x1f91f; 基于入门网络安全/黑客打造的&#xff1a;&#x1f449;黑客&网络安全入门&进阶学习资源包 大家都知道网络安全行业很火&#xff0c;这个行业因为国家政策趋势正在大力发展&#xff0c;大有可为!但很多人对网络安全工程师还是不了解&#xff0c;不知道网…

IP数据云 识别和分析tor、proxy等各类型代理

在网络上使用代理&#xff08;tor、proxy、relay等&#xff09;进行访问的目的是为了规避网络的限制、隐藏真实身份或进行其他的不正当行为。 对代理进行识别和分析可以防止恶意攻击、监控和防御僵尸网络和提高防火墙效率等&#xff0c;同时也可以对用户行为进行分析&#xff…

【C#设计模式(10)——装饰器模式(Decorator Pattern)】

前言 装饰器模式可以在运行时为对象添加额外的功&#xff0c;而无需修改原始对象的代码。这种方式比继承更加灵活。 代码 //蛋糕类&#xff08;抽象类&#xff09; public abstract class Cake {public abstract void Create(); } //奶油蛋糕类 public class CreamCake : Cak…

【论文速读】| 注意力是实现基于大语言模型的代码漏洞定位的关键

基本信息 原文标题&#xff1a;Attention Is All You Need for LLM-based Code Vulnerability Localization 原文作者&#xff1a;Yue Li, Xiao Li, Hao Wu, Yue Zhang, Xiuzhen Cheng, Sheng Zhong, Fengyuan Xu 作者单位&#xff1a;National Key Laboratory for Novel So…

python包管理工具pip和conda的使用对比

python包管理工具pip和conda的使用对比 总述1. pip使用2. conda注意虚拟环境之间的嵌套&#xff0c;这个会导致安装包后看不到包&#xff0c;实际是安装到了base环境里 未完待续 总述 pip相对于conda,对应包的依赖关系管理不强&#xff0c;坏处是容易造成包冲突&#xff0c;好…

Diff 算法的误判

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

Python与其他语言比较·练习题 --- 《跟着小王学Python》

Python与其他语言比较练习题 — 《跟着小王学Python》 《跟着小王学Python》 是一套精心设计的Python学习教程&#xff0c;适合各个层次的学习者。本教程从基础语法入手&#xff0c;逐步深入到高级应用&#xff0c;以实例驱动的方式&#xff0c;帮助学习者逐步掌握Python的核心…

如何修改npm包

前言 开发中遇到一个问题&#xff0c;配置 Element Plus 自定义主题时&#xff0c;添加了 ElementPlusResolver({ importStyle: "sass" }) 后&#xff0c;控制台出现报错&#xff0c;这是因为 Dart Sass 2.0 不再支持使用 !global 来声明新变量&#xff0c;虽然当前…