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

news/2024/11/19 18:16:53/

代码解析与实现

设置根元素的 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.ppmy.cn/news/1548290.html

相关文章

后端返回大数问题

这个问题并不难,但是在开发的时候没有注意到 后端返回了一个列表数据,包含id,这个id是一个大数,列表进入详情,需要将id传入到详情页面详情页面内部通过id获取数据一直404,id不正确找问题,从路由传参到请求数据发现id没有问题,然后和后端进行联调,发现后端返回的id和我获取的id…

django从入门到精通(五)——表单与模型

好的&#xff0c;下面将详细介绍 Django 的表单与模型&#xff0c;包括它们的定义、使用、如何在 Django Admin 中结合使用&#xff0c;以及相关的字段类型和验证机制。 Django 模型与表单 1. Django 模型 Django 模型是一个 Python 类&#xff0c;用于定义数据库中的数据结…

【ACM出版】第四届信号处理与通信技术国际学术会议(SPCT 2024)

& 第四届信号处理与通信技术国际学术会议&#xff08;SPCT 2024&#xff09; 2024 4th International Conference on Signal Processing and Communication Technology 2024年12月27-29日 中国深圳 www.icspct.com 第四届信号处理与通信技术国际学术会议&#x…

Python 正则表达式进阶用法:字符集与字符范围详解

Python 正则表达式进阶用法&#xff1a;字符集与字符范围详解 正则表达式是文本处理和数据清洗中不可或缺的工具。在前面的学习中&#xff0c;我们已经了解了基本的正则表达式匹配&#xff0c;如匹配单个字符、字符串开始和结束的位置等。今天&#xff0c;我们将进入正则表达式…

定时清理潜在客户列表中的无效邮箱可提高EDM电子邮件自动化营销邮件送达率

定时清理无效邮箱对于邮件营销来说&#xff0c;具有多重好处&#xff0c;这些好处直接关系到营销活动的效率、成本节约、品牌形象以及法律合规性。以下是几个关键方面&#xff1a; 提高邮件送达率&#xff1a; 无效邮箱&#xff08;如不存在、拼写错误或已废弃的邮箱地址&…

Filebeat升级秘籍:解锁日志收集新境界

文章目录 一、什么是filebeat二、Filebeat的工作原理2.1 filebeat的构成2.1.1 Prospector 组件2.1.2 Harvester 组件 2.2 filebeat如何保存文件的状态2.3 filebeat何如保证至少一次数据消费 三、Filebeat配置文件四、filebeat对比fluented五、Filebeat的部署安装5.1裸金属安装5…

基于Canny边缘检测和轮廓检测

这段代码实现了基于Canny边缘检测和轮廓检测&#xff0c;从图像中筛选出面积较大的矩形&#xff0c;并使用OpenCV和Matplotlib显示结果。主要流程如下&#xff1a; 步骤详解&#xff1a; 读取图像&#xff1a; img cv2.imread(U:/1.png)使用cv2.imread()加载图像。 转换为灰…

ES操作命令

1.查看索引 curl -XGET "http://localhost:9200/_cat/indices?v" 2.删除索引 curl -X DELETE "http://127.0.0.1:9200/indexName" 3.ES最大聚合参数设置 index.max_result_window的默认值通常是10000&#xff0c;如果你需要返回更多结果&#xff0c;…