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

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

news 2026/2/10 2:14:42

"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

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/2/9 6:48:42

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/2/6 22:55:12

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2026/1/26 4:49:33

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2026/1/31 17:02:38

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2026/2/7 2:25:07