新增单位rem

  • em：根据父元素的大小来决定
  • rem：根据根元素(html)元素来决定

html元素默认字体大小为16px(基础字体大小)
Chrome浏览器不支持12px以下的字体大小(字体大小小于12px后改字体一直为12px)，其他浏览器没问题

	<div class="l1">
        文字
        <div class="l2">
            文字
        </div>
    </div>

		html {
   
            /* 根元素默认大小为16px */
            /* 62.5% * 16 = 10px */
            font-size: 62.5%;
        }
        .l1 {
   
            font-size: 2rem;
            width: 10rem;
            height: 10rem;
            border: 1px solid red;
        }
        .l2 {
   
            font-size: 3rem;
            width: 20rem;
            height: 20rem;
            border: 1px solid red;
        }

l1的字体大小为20px,l2的字体大小为30px
效果：

解决谷歌浏览器中字体大小不支持12px以下的方法：
通过transform: scale()来进行缩放来解决
给一个元素的字体大小设置为6px
缩放前

缩放后

 		p {
   
            font-size: 6px;
            transform: scale(0.5);
        }