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

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

news 2026/2/7 10:04:15

"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

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/1/26 20:39:53

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2026/1/31 23:23:23

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2026/1/30 9:51:12

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05