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

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

news 2026/1/15 1:04:24

"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有什么区别

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

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

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

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

【Hive】配置

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

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

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

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

Spring Boot 整合 RabbitMQ 多种消息模式

node多版本控制

Redis set集合

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

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

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

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

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

vue的diff算法？

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

从WWDC看苹果产品发展的规律

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

LeetCode - 394. 字符串解码

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

爬虫基础学习day2

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

使用Spring AI和MCP协议构建图片搜索服务

OD 算法题 B卷【正整数到Excel编号之间的转换】

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成