rem和vw、vh这对“最佳拍档”，打工人网页适配的救星！

CSS世界的“代码搬砖人”们，今天我们来聊聊两个CSS界的黄金搭档：rem和vw/vh。它们就像那对总被网友调侃的“最会站队的朋友”，一个负责“精确”、一个负责“灵活”。当他们一起出场，真的是“能文能武，适配全场”！

1. rem和vw/vh的基本定义：打工人入门指南

rem：它是以root（根元素）的字体大小为单位。简单来说，就是根据HTML标签的font-size来计算。比如，浏览器默认的font-size是16px，那么1rem=16px。如果你想要整个页面更适配不同设备，rem让你一改font-size，所有的元素都跟着一起变大或变小，打工人常说：“事半功倍，我要能偷懒的就不加班！”

vw（viewport width）：你可以理解为屏幕宽度的“百分比单位”。1vw就是整个视口宽度的1%，所以如果屏幕宽1000px，1vw=10px。就是这么简单。

vh（viewport height）：跟vw同理，但它是视口高度的百分比。假如屏幕高800px，1vh=8px。简单吧？现在你有了两把刷子，可以让页面随着设备大小变“柔软”起来，简直是“居家必备、出门旅行不发愁”。

2. rem和vw/vh的联合使用：打工人适配终极套路

当我们说到rem，它是基于字体大小的，相当于“稳重可靠的大哥”，适合用来做基础布局、字体大小、边距、内边距。而vw/vh则是那种“灵活跳脱的小弟”，特别适合处理那些“需要跟着屏幕变化的东西”。

应用场景1：字体和布局“稳中有变” 想象一下，一个需要响应式设计的页面——你希望整体布局随设备变化而变，但字体大小要维持合理的比例。

• rem：让字体大小、按钮的padding这些基础元素都用rem来定义，因为这些东西得保持一致的“风格”，不管你是看手机还是平板，它们得像“打工人”一样踏实、不出错。

• vw/vh：用于布局的更宽泛的地方，比如页面宽度、图片尺寸、banner高度等。就像站在舞台上的背景布，得随场景而变动，但不能喧宾夺主。

html {
  font-size: 2vw; /* 字体大小基于视口宽度，但不容易太小 */
}

h1 {
  font-size: 2rem; /* 标题字体大小相对固定 */
}

.banner {
  height: 40vh; /* banner高度占据视口的40% */
  width: 100vw; /* banner的宽度总是全屏 */
}

在这个场景中，rem让页面看起来不随意失控，而vw/vh则让页面元素能随着不同屏幕大小智能调整。页面打开效果就是：稳如山的内容加上灵活多变的视觉效果，完美适配各种设备！

3. 具体场景1：实现全屏弹窗

大家肯定都见过那种全屏的登录弹窗，当你切换手机、平板、电脑时，它总是那么完美居中，像极了“面试题：实现一个弹窗居中，适配所有设备”。

.modal {
  width: 80vw; /* 弹窗宽度随屏幕宽度变化 */
  height: 60vh; /* 弹窗高度随屏幕高度变化 */
  padding: 2rem; /* 内边距用rem，保持一致 */
}

用vw和vh定义宽高，可以确保弹窗的尺寸相对屏幕大小而变化，而用rem设置padding，让你的内容在各个设备上都保持舒适的空隙。“适配万物”的弹窗，是不是就像魔法一样？

4. 具体场景2：响应式字体大小

有时候我们想要标题字体随着屏幕大小自适应变化，但又不能太疯狂：毕竟如果字体太大，感觉像是PPT标题，太小就像是要考验眼力。

h1 {
  font-size: calc(1rem + 2vw); /* 基础大小加上视口宽度的动态变化 */
}

这个公式就像“打工人下班去健身房健身”，有了个基础设定，随时根据需要动态调整，永远保持最优状态。

5. 总结：打工人都该学会的“rem + vw/vh”组合技

在实际开发中，rem适合控制那些需要“靠谱”的元素：比如字体、按钮、内外边距等。而vw和vh则是你处理大布局、背景、全屏元素的“万能助手”。

所以，打工人们，如果你想要网页设计“站着挣钱，躺着适配”，请牢记这对好兄弟：rem稳得住，vw/vh跑得快。只要用好它们，再也不用担心客户的“这怎么在手机上看不对劲”的电话了！

赶紧试试这个组合，甭管设备多奇葩，你的页面都能Hold住！