rem、em的区别与使用方式

本文深入探讨了REM和EM这两种CSS单位的本质区别及其在响应式布局中的应用。REM基于HTML根元素的字体大小,而EM则参照其父元素的字体大小。通过调整HTML的字体基准百分数,可以轻松实现响应式设计,只需改变基数即可适应不同屏幕尺寸。

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

本质区别: rem(root element)是参照html的font-size,em(element)是参照父元素的font-size

优点: 以rem/em为单位比px更方便,屏幕尺寸发生变化时只需要更改html/body基数即可,不需要再重新给每个标签写不同的font-size

1.使用rem为单位,系统处理时(将rem转化为px)只会看html的font-size

   在使用media query做响应式布局时(以bootstrap为例):

      a.首先要做的是确定rem的基数(即html的font-size),一般都是以10px为基数(方便计算),这个可以根据自己的习惯来.

      b.确定html基准百分数(rem参照下html的字体大小采取百分数形式),百分数是自己设定的基数除以默认字体大小(16px)的值.比如以10px为基数时,基准百分数就是: 10px/16px=62.5%;即设置html的font-size为62.5%;

     c.当html的基准百分数设置之后,元素使用rem为单位时就是以基数(a中设置的基数值)为基础单位,换算方式为: 10px=1rem;比如要设置一个p标签的字体大小为20px,用rem表示就是2rem(公式: 以rem为单位的值=想要设置的字体大小(20px)/基数值(10px)=2rem).

   响应式实现: 使用@media 在监测到屏幕尺寸发生变化时只需为html设置不同的基数值即可

   如下面例子: 在屏幕宽度小于414px时以8px为基数,非响应式下(415px-1365px)以10px为基数;大于1366px时以12px为基数

html{
  font-size: 62.5%; // 以10px为基数,此时class为a的标签字体大小为20px
}

.a{
  font-size: 2rem;
}

@media screen and (max-width: 414px){
  html{
    font-size: 50%; // 以8px为基数,此时class为a的标签字体大小为16px
  }
}

@media screen and (min-width: 1366px){
  html{
    font-size: 75%; // 以12px为基数,此时class为a的标签字体大小为24px
  }
}

     

2.使用em为单位,系统处理时(将em转化为px)只会看父元素(本文以body为例)的font-size

   a.使用px为基准

    此时只需要设置一个基数即可,然后接下来使用时只需要用想要的字体大小除以设置的基数值即为以em为单位的值;如: 设置em基数为10px,要设置一个标签的字体大小为15px,则em=想要设置的值(15px)/基数(10px)=1.5em.例:

body{
  font-size: 10px; // 以10px为基数,此时class为a的标签字体大小为20px
}

.a{
  font-size: 2em;
}

@media screen and (max-width: 414px){
  body{
    font-size: 8px; // 以8px为基数,此时class为a的标签字体大小为16px
  }
}

@media screen and (min-width: 1366px){
  body{
    font-size: 12px; // 以12px为基数,此时class为a的标签字体大小为24px
  }
}

   b.使用百分比为基准

    使用方式同上面以rem为单位的步骤,例:

body{
  font-size: 62.5%; // 以10px为基数,此时class为a的标签字体大小为20px
}

.a{
  font-size: 2em;
}

@media screen and (max-width: 414px){
  body{
    font-size: 50%; // 以8px为基数,此时class为a的标签字体大小为16px
  }
}

@media screen and (min-width: 1366px){
  body{
    font-size: 75%; // 以12px为基数,此时class为a的标签字体大小为24px
  }
}

   说明: 具体使用时其实两者差不多,rem也可以直接以px为基准单位,只是两者参照标签不同,使用时需注意

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜枫的风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值