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

面试官：rem和vw有什么区别

news 2026/1/14 23:30:21

"rem" 和 "vw"的区别

"rem" 和 "vw" 都是用于网页设计的CSS单位。

"rem" 是相对于根元素的字体大小来计算的单位，即相对于 "html" 标签的字体大小。例如，如果 "html" 标签的字体大小为 16px，那么 "1rem" 就等于 16px。

"vw" 是相对于视口宽度的单位，即相对于浏览器窗口的宽度。例如，如果视口宽度为 1000px，那么 "1vw" 就等于 10px （因为1vw相当于视口宽度的1%）。vw和百分比的区别：百分比是根据父元素来做对比的，vw是根据当前屏幕来做对比的。

因此，两者的区别在于计算的基础不同。使用 "rem" 单位的元素大小将随着根元素字体大小的改变而改变，而使用 "vw" 单位的元素大小将随着视口宽度的改变而改变。

在一个项目中可以同时使用吗

可以同时在同一个项目中使用 "rem" 和 "vw" 单位。在实际的网页设计中，它们有着不同的用途，因此往往需要同时使用这两种单位。

通常情况下，"rem" 更适合用于字体大小、间距、边框等相对比较小的元素，因为这些元素大小的变化相对不会太大。而"vw" 更适合用于相对于视口宽度而言较大的元素，例如页面的宽度或高度、容器的宽度等。

需要注意的是，在使用 "vw" 单位时，一些较老版本的浏览器可能无法支持，因此建议在使用 "vw" 单位时进行必要的兼容性检查和处理。

上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用rem和vw的示例页面</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>html {font-size: 62.5%; /* 设置根元素字体大小为10px */}body {font-size: 1.6rem; /* 设置body字体大小为16px */}.container {width: 80vw; /* 设置容器宽度为视口宽度的80% */margin: 0 auto; /* 居中对齐 */}.box {font-size: 2rem; /* 设置盒子内字体大小为20px */padding: 2rem; /* 设置盒子内边距为20px */}</style>
</head>
<body><div class="container"><div class="box"><h1>使用rem和vw的示例页面</h1><p>这是一个使用rem和vw单位的示例页面。</p></div></div>
</body>
</html>

在上述代码中，font-size: 62.5%; 表示将根元素 html 的字体大小设置为浏览器默认字体大小的 62.5%，即 16px * 0.625 = 10px。这个设置是为了方便将 px 单位转换成 rem 单位，因为 1rem 相当于根元素字体大小的倍数。

例如，如果要将某个元素的字体大小设置为 20px，则可以将其设置为 2rem，因为 20px 是根元素字体大小的两倍（即 20 / 10 = 2）。这样，我们就可以使用相对单位 rem 来实现响应式设计，而不必考虑浏览器默认字体大小的影响。

相关文章：

面试官：rem和vw有什么区别

"rem" 和 "vw"的区别 "rem" 和 "vw" 都是用于网页设计的CSS单位。 "rem" 是相对于根元素的字体大小来计算的单位&#xff0c;即相对于 "html" 标签的字体大小。例如&#xff0c;如果 "html" 标签的字…...

编程日记 2023/3/18 21:34:40

【GPT-4】GPT-4 相关内容总结

目录 ​编辑 官网介绍 GPT-4 内容提升总结 GPT-4 简短版总结 GPT-4 基础能力 GPT-4 图像处理 GPT-4 技术报告 训练过程 局限性 GPT-4 风险和应对措施 开源项目&#xff1a;OpenAI Evals 申请 GPT-4 API API的介绍以及获取 官网介绍 官网&#xff1a;GPT-4 API候…...

编程日记 2023/3/18 21:29:39

5.springcloud微服务架构搭建 之 《springboot集成Hystrix》

1.springcloud微服务架构搭建 之 《springboot自动装配Redis》 2.springcloud微服务架构搭建 之 《springboot集成nacos注册中心》 3.springcloud微服务架构搭建 之 《springboot自动装配ribbon》 4.springcloud微服务架构搭建 之 《springboot集成openFeign》 目录 1.项目…...

编程日记 2023/3/18 21:24:32

【工作中问题解决实践 七】SpringBoot集成Jackson进行对象序列化和反序列化

去年10月份以来由于公司和家里的事情太多&#xff0c;所以一直没有学习&#xff0c;最近缓过来了&#xff0c;学习的脚步不能停滞啊。回归正题&#xff0c;其实前年在学习springMvc的时候也学习过Jackson【Spring MVC学习笔记 五】SpringMVC框架整合Jackson工具&#xff0c;但是…...

编程日记 2023/3/18 21:19:31

香港服务器遭受DDoS攻击后如何恢复运行？

​　　您是否发现流量异常上升?您的网站突然崩溃了吗?当您注意到这些迹象时&#xff0c;可能是在陷入了DDoS攻击的困境&#xff0c;因而&#xff0c;当开始考虑使用香港服务器时&#xff0c;也应该考虑香港服务器设备受DDoS攻击时&#xff0c;如何从中恢复。 在 DDoS 攻击香港…...

编程日记 2023/3/18 21:14:28

【Hive】配置

目录 Hive参数配置方式 参数的配置方式 1. 文件配置 2. 命令行参数配置 3. 参数声明配置 配置源数据库 配置元数据到MySQL 查看MySQL中的元数据 Hive服务部署 hiveserver2服务 介绍 部署 启动 远程连接 1. 使用命令行客户端beeline进行远程访问 metastore服务 …...

编程日记 2023/3/18 21:09:25

IP-GUARD如何强制管控电脑设置开机密码要符合密码复杂度？

如何强制管控电脑设置开机密码要符合密码复杂度？ 7 可以在控制台-【策略】-【定制配置】，添加一条配置，开启系统密码复杂度检测。 类别：自定义 关键字：bp_password_complexity 内容：1 效果图：...

编程日记 2023/3/18 21:04:22

剑指 Offer II 031. 最近最少使用缓存

题目链接 剑指 Offer II 031. 最近最少使用缓存 mid 题目描述 运用所掌握的数据结构&#xff0c;设计和实现一个 LRU(Least Recently Used&#xff0c;最近最少使用) 缓存机制 。 实现 LRUCache类&#xff1a; LRUCache(int capacity)以正整数作为容量 capacity初始化 LRU缓…...

编程日记 2023/3/18 20:59:21

44岁了，我从没想过在CSDN创作2年，会有这么大收获

1998年上的大学&#xff0c;02年毕业&#xff0c;就算从工作算起&#xff0c;我也有20余年的码龄生涯了。 但正式开启博文的写作&#xff0c;却是2021年开始的&#xff0c;差不多也就写了2年的博客&#xff0c;今天我来说说我在CSDN的感受和收获。 我是真的没想到&#xff0c;…...

编程日记 2023/3/18 20:54:19

相位相参信号源的设计--示波器上的信号不稳定，来回跑？

目录乱跑的波形边沿触发触发方式外部触发相参与非相参相位相参的射频信号源样机外观与内部设计软件设计上位机软件信号源使用方法PWM触发信号射频信号的时域波形射频信号的频谱输出功率在示波器的实际使用当中波形在示波器的时域上乱跑&#xff0c;左右移动&#xff0c;定不下来…...

编程日记 2023/3/18 20:49:18

Spring Boot 整合 RabbitMQ 多种消息模式

Spring Boot 整合 RabbitMQ 多种消息模式 准备工作集成 RabbitMQ发布/订阅模式点对点模式主题模式总结Spring Boot 是一个流行的 Java 应用程序开发框架，而 RabbitMQ 是一款可靠的消息队列软件。将 Spring Boot 和 RabbitMQ 结合起来可以帮助我们轻松地实现异步消息传递。Rabb…...

编程日记 2023/3/18 20:44:14

node多版本控制

前言 最近在折腾Python&#xff0c;并将node升级至v18.14.2。突然发现一个旧项目无法运行&#xff0c;也无法打包&#xff0c;里面的node-sass报错&#xff0c;显然这是因为node版本过高导致的。 将node版本降低至以前的v14.16.0&#xff0c;果然立马就能正常运行。 存在不同…...

编程日记 2023/3/18 20:39:12

Redis set集合

Redis set &#xff08;集合&#xff09;遵循无序排列的规则&#xff0c;集合中的每一个成员&#xff08;也就是元素&#xff0c;叫法不同而已&#xff09;都是字符串类型&#xff0c;并且不可重复。Redis set 是通过哈希映射表实现的&#xff0c;所以它的添加、删除、查找操作…...

编程日记 2023/3/18 20:34:11

漫画：什么是希尔排序算法？

希尔排序&#xff08;ShellSort&#xff09;是以它的发明者Donald Shell名字命名的&#xff0c;希尔排序是插入排序的改进版&#xff0c;实现简单&#xff0c;对于中等规模数据的性能表现还不错 一、排序思想 前情回顾&#xff1a;漫画&#xff1a;什么是插入排序算法&#xf…...

编程日记 2023/3/18 20:29:07

问卷工具选择要看哪些方面？

通常来讲&#xff0c;我们在使用一款问卷制作工具制作问卷时会有哪些需求呢&#xff1f; 一、用户需求 1、操作简单&#xff0c;易上手。 2、能够满足用户个性化的需求。 3、提供多语言服务。 4、能够帮助发布以及数据收集。 5、简化数据分析 市面上的问卷调查制作工具都…...

编程日记 2023/3/18 20:24:06

Qt之QPainter绘制多个矩形/圆形（含源码+注释）

一、绘制示例图 下图绘制的是矩形对象&#xff0c;但是将绘制矩形函数&#xff08;drawRect&#xff09;更改为绘制圆形&#xff08;drawEllipse&#xff09;即可绘制圆形。 二、思路解释 绘制矩形需要自然要获取矩形数据&#xff0c;因此通过鼠标事件获取每个矩形的rect数…...

编程日记 2023/3/18 20:19:03

介绍两款红队常用的信息收集组合工具

介绍两款红队常用的信息收集组合工具1.Ehole本地识别FOFA识别结果输出2.AlliN1.Ehole EHole(棱洞)3.0 红队重点攻击系统指纹探测工具 EHole是一款对资产中重点系统指纹识别的工具&#xff0c;在红队作战中&#xff0c;信息收集是必不可少的环节&#xff0c;如何才能从大量的资…...

编程日记 2023/3/18 20:14:01

类ChatGPT国产大模型ChatGLM-6B，单卡即可运行

2023年3月14日GPT4又发布了&#xff0c;在ChatGPT发展如火如荼的当下&#xff0c;我们更应该关注国内的进展&#xff0c;今天将分享一个清华大学基于GLM-130B模型开发的类似ChatGPT的ChatGLM-6B模型&#xff0c;ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0…...

编程日记 2023/3/18 20:08:59

vue的diff算法？

文章目录是什么比较方式原理分析Diff算法的步骤&#xff1a;首尾指针法比对顺序&#xff1a;是什么 diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点&#xff1a; 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中&#xff0c;循环从两边向中间比较…...

编程日记 2023/3/18 20:03:58

C++ | 对比inline内联函数和宏的不同点

文章目录一、前言二、宏的优缺点分析1、概念回顾2、宏的缺点3、宏的优点三、inline内联函数1、概念2、特性①&#xff1a;空间换时间&#x1f381;趣味杂谈&#xff1a;庞大的游戏更新包3、特性②&#xff1a;inline实现机制4、特性③&#xff1a;inline的声明与定义反汇编观察…...

编程日记 2023/3/18 19:58:56

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/1/9 7:20:27

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2026/1/1 14:01:45

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/1/1 2:06:55

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/5 12:06:24

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/12 22:18:41

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01