em与rem的区别:何时使用em与rem

本文介绍了em与rem这两种相对单位的区别与应用场合。em单位基于元素自身的字体大小,而rem单位则基于html根元素的字体大小。文章指导如何根据布局需求选择合适的单位,并提供了在媒体查询中使用rem单位的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

教程亘长,这里只提供总结,若想知道个所以然还请点击链接查看原文

总结:

  • remem 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
  • em 单位基于使用他们的元素的字体大小。
  • rem 单位基于 html 元素的字体大小。
  • em 单位可能受任何继承的父元素字体大小影响
  • rem 单位可以从浏览器字体设置中继承字体大小。
  • 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
  • 在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem
  • 使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
  • 媒体查询中使用 rem 单位
  • 不要在多列布局中使用 emrem ,改用%。
  • 不要使用 emrem,如果缩放会不可避免地导致要打破布局元素。

转载自HelKyle的翻译:《何时使用 Em 与 Rem》
英文原文:https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem–cms-23984

px、emrem是用于网页开发中定义长度单位的三种常见选项。它们在使用和计算上有一些区别,具体如下: 1. px(像素):px 是最基本的长度单位,表示屏幕上的一个像素点。它是一个绝对单位,意味着它的大小在不同的设备和屏幕分辨率下是固定的。px 的使用相对简单,适合在需要精确控制元素大小和位置的情况下使用,比如设计稿的还原和特定元素的布局。 2. em(相对于父元素字体大小的倍数):em 是一个相对单位,相对于父元素的字体大小进行计算。如果一个元素的字体大小为 16px,设置为 2em,则相当于 32px。em 适合在需要相对于父元素进行缩放的情况下使用,比如设置标题、段落等文本元素的字体大小。 3. rem(相对于根元素字体大小的倍数):rem 也是一个相对单位,相对于根元素(即 html 元素)的字体大小进行计算。 em 不同的是,rem 的计算不会受到父元素字体大小的影响。因此,rem 更适合在需要整个页面元素的大小比例都随着根元素字体大小变化的情况下使用,比如响应式网页设计。 使用场景: - px:适用于需要精确控制元素大小和位置,尤其是在固定布局的情况下。 - em:适用于需要相对于父元素进行缩放的文本元素,如标题、段落等。 - rem:适用于需要整个页面元素的大小比例随根元素字体大小变化的响应式设计。 需要注意的是,不同的单位在不同的场景下有不同的优劣,并且可以混合使用。根据实际需求和网页布局的要求,选择合适的单位进行使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值