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

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

news 2025/11/29 16:41:03

"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

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/11/25 5:04:24

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/11/26 10:03:11

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/11/17 3:25:30

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/11/24 17:37:27

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/11/24 17:53:35

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/11/25 12:33:15

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/11/27 3:05:40

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/9/29 4:00:38