您的位置: 首页  >  文章  >  CSS字体单位em和rem的区别

CSS字体单位em和rem的区别

分类: 文章 • 2023-12-22 16:17:34

       css为我们提供了非常多的尺寸单位，字体经常使用的单位包括以下几种：

CSS字体单位em和rem的区别

       单位那么多我们如何根据我们的需求选择对应字体单位？我们经常接触的就是单位px，因为它简洁明了，人们可以直接读取它的数值，所以备受人们的青睐。

CSS字体单位em和rem的区别

       随着智能设备出现，我们常常需要在不同设备之间进行切换。但移动设备屏幕分辨率相对小于传统计算机显示器，根据px的特性可能会出现布局问题。正是由于px的缺点，当涉及到继承关系、响应式布局时，我们通常使用的字体单位就是em和rem这两个单位。那么，这两者之间有何区别呢？

       通过上图我们可以了解到em和rem都是相对长度单位，都是以倍数关系确定长度的，只是两者的参照物不一样。

            （a）、em的参照对象为父元素，如果没有向上继承，则参照对象为其自身。

            （b）、rem的参照对象为根元素，即<html>标签。

 

代码走起

【  HTML代码  】

    

  1. 

    

    <div class="container">
    

    2. 

  2. 

    

    	<div id="test1">这是text1文本
    

    3. 

  3. 

    

    		<div id="text2">这是text2文本
    

    4. 

  4. 

    

    			<div id="text3">这是text3文本
    

    5. 

  5. 

    

    	</div></div></div></div>

    

    6. 

  6. 

    

    		
    

    7. 

  7. 

    

    	<br /><br />

    

    8. 

  8. 

    

    		
    

    9. 

  9. 

    

    <div class="container">
    

    10. 

  10. 

    

    	<div id="box1">这是Box1文本
    

    11. 

  11. 

    

    		<div id="box2">这是Box2文本
    

    12. 

  12. 

    

    			<div id="box3">这是Box3文本
    

    13. 

  13. 

    

    	</div></div></div>

    

    14. 

  14. 

    

    </div>
    

    15.

 

 

 

【  CSS样式  】

    

  1. 

    

    html{font-size: 24px;font-family: "微软雅黑";color: #333;}
    

    2. 

  2. 

    

    body{font-size: 16px;}
    

    3. 

  3. 

    

     
    

    4. 

  4. 

    

    #text1{font-size: 1em;}
    

    5. 

  5. 

    

    #text2{font-size: 2em;}
    

    6. 

  6. 

    

    #text3{font-size: 3em;}
    

    7. 

  7. 

    

     
    

    8. 

  8. 

    

    #box1{ont-size: 1rem;}
    

    9. 

  9. 

    

    #box2{font-size: 2rem;}
    

    10. 

  10. 

    

    #box3{font-size: 3rem;}
    

    11.

 

【  结果  】

CSS字体单位em和rem的区别

 

       从上面的三幅图我们可以看出，em和rem之间的关系（由于向下继承的关系，所以container的字体大小为16px）

             em中，text1是container的1倍为16px，text2是text1的2倍故为32px，而text3是text2的3倍故为96px

             rem中，text1是html的1倍故为24px，text2是html的2倍故为48px，text3是html的3倍故为72px

 

       从上述的介绍和例子我们可以看出，em和rem的区别挺明显的。其实无论是台式还是移动端开发，两者其实都可以使用，只不过em需要注意继承关系，并且需要修改多个内容，而rem恰恰相反，所以rem更适合移动式开发。也就是说，em是以自身父容器为参考对象的，而rem直接以HTML为参考对象的，在多层嵌套的情况下使用em很容易出现问题。

 

 

相关推荐