CSS篇:前端干货!1分钟分清rem、em、vw和%的区别✨

🎓 作者简介前端领域优质创作者

🚪 资源导航: 传送门=>

🎬 个人主页: 江城开朗的豌豆

🌐 个人网站: 江城开朗的豌豆 🌍

📧 个人邮箱: YANG_TAO_WEB@163.com 📩

💬 个人微信: y_t_t_t_ 📱

📌 座 右 铭: 生活就像心电图,一帆风顺就证明你挂了 💔

👥 QQ群: 906392632 (前端技术交流群) 💬


引言

在前端开发中,CSS单位的选择直接影响页面的布局适配能力。不同的单位(如rememvw/vh%)适用于不同的场景,理解它们的计算规则和适用场景,能帮助我们更高效地实现响应式设计。本文将深入对比这些单位,并给出实际应用建议。


1. rem(Root EM)

定义

rem(Root EM)是相对于**根元素(<html>)的font-size**计算的单位。

计算方式

  • 默认情况下,浏览器根元素的font-size16px,因此 1rem = 16px

  • 可以通过修改htmlfont-size来调整rem的基准值:

    css 复制代码
    html {
      font-size: 10px; /* 1rem = 10px */
    }

适用场景

全局响应式布局 (如移动端适配)

需要整体缩放的元素(如字体、间距、宽高)

示例

css 复制代码
.container {
  width: 20rem; /* 20 × 10px = 200px */
  padding: 1rem; /* 10px */
}

2. em(相对父级单位)

定义

em 是相对于**父元素的font-size**计算的单位。

计算方式

  • 如果父元素的font-size16px,则 1em = 16px

  • 嵌套时计算会累积,容易导致尺寸失控:

    css 复制代码
    .parent { font-size: 16px; }
    .child { font-size: 0.8em; } /* 16px × 0.8 = 12.8px */
    .grandchild { font-size: 0.8em; } /* 12.8px × 0.8 = 10.24px */

适用场景

局部样式调整 (如按钮内边距、图标对齐)

不适合多层嵌套布局(计算复杂)

示例

css 复制代码
.button {
  font-size: 1em; /* 继承父级字体 */
  padding: 0.5em 1em; /* 相对父级字体计算 */
}

3. vw / vh(视窗单位)

定义

  • vw(Viewport Width):1vw = 视窗宽度的1%
  • vh(Viewport Height):1vh = 视窗高度的1%

计算方式

  • 如果视窗宽度是1200px,则 10vw = 120px
  • 不受父元素影响,直接基于浏览器窗口计算。

适用场景

全屏布局 (如轮播图、背景图)

视窗比例适配(如弹窗、浮动元素)

示例

css 复制代码
.fullscreen-banner {
  width: 100vw; /* 占满整个视窗宽度 */
  height: 50vh; /* 视窗高度的一半 */
}

4. 百分比(%)

定义

百分比单位是相对于父元素的对应属性计算的,不同属性的参照对象可能不同。

计算方式

  • width: 50% → 父元素宽度的50%
  • padding-top: 50% → 参照父元素的宽度(而不是高度!)

适用场景

流式布局 (如栅格系统、弹性盒子)

依赖父级尺寸的元素(如自适应容器)

示例

css 复制代码
.parent {
  width: 200px;
}
.child {
  width: 50%; /* 100px */
  padding-top: 25%; /* 50px(基于父元素宽度计算) */
}

5. 对比总结

单位 参照对象 特点 适用场景
rem 根元素font-size 全局可控,适合响应式 移动端适配、全局缩放
em 父元素font-size 嵌套易混乱 局部样式(按钮、图标)
vw/vh 视窗宽高 直接响应视窗变化 全屏布局、视窗比例适配
% 父元素对应属性 依赖父级结构 流式布局、栅格系统

6. 最佳实践建议

  1. 移动端适配rem + 媒体查询

    css 复制代码
    html {
      font-size: calc(10px + 0.5vw); /* 动态调整基准值 */
    }
  2. 全屏元素vw/vh

    css 复制代码
    .hero-section {
      height: 100vh;
    }
  3. 流式布局% + flex/grid

  4. 避免em嵌套问题 → 仅在局部使用,或改用rem


结语

不同的CSS单位各有优劣,理解它们的计算规则和适用场景,能让我们更灵活地实现响应式设计。建议在项目中结合remvw/vh和百分比,根据需求选择最佳方案。

欢迎在评论区交流你的CSS单位使用心得! 🚀

欢迎在评论区分享你的想法和建议!如果你觉得这篇文章有用,别忘了点赞和收藏哦~

相关推荐
风无雨17 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Java技术小馆1 小时前
langChain开发你的第一个 Agent
java·面试·架构
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家2 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记3 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript