px、em、rem

Bertha 。 2022-06-01 04:28 281阅读 0赞

#####     #####

> px、em、rem都是用来描述字体大小的单位

##### px #####

> px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。  
> 任意浏览器的默认字体大小都是16px。  
> 给HTML标签设置font-size属性并赋值，将根据设置的值显示字体， 其子标签若没有单独设置font-size，子标签的字体大小和父标签一致。否则，按设置的值显示。
> 
> 支持度：目前所有浏览器。

##### em #####

em是相对长度单位。em的值并不是固定的，em会继承父级元素的大小。

1em=16px;

<div id="demo">
         <a>aaaaaaaaaaaaaaaaaaaaaa</a>
         <div class="demo2">div div div div div 
             <i>papapapapapapa</i>
             <p>ppppppppppppppppppppp
    	     <a>papapapapap</a>
             </p>
         </div>
    </div>

#demo{
    	  font-size:1em;	 
    	  }
    	  #demo a{
    	  font-size:0.75em;
    	  }
    	  .demo2{
    	  font-size:1em;
    	  }
    	 .demo2 i{
    	      font-size:2em;
    	  }

运行结果：

![SouthEast][]

>   支持度：IE8 及以上支持，其它浏览器。  
>   但是可以看到em是相对父级元素的，但HTML标签的嵌套太过复杂时使用em就不是太好的选择了。

##### rem #####

> rem是CSS3中新增的一个相对单位。root em(相对于根元素的em）。
> 
> 使用rem设定字体大小时，仍然是相对的，但是相对的只是html根元素。
> 
> 只需要修改根元素，就可以成比例的调整所有的字体大小，还能避免因为层级嵌套太多造成的连锁反应。

对于不支持rem的浏览器，多写一个px就好。不支持的浏览器会自行忽略rem。

##### rem与px的换算             1rem等于多少px呢？1rem等于html根元素设定的font-size的px值。          假设我们设定如下  `html{ font-size:14px; }` #####

> #####   此时1rem=14px。 #####

##### px 与 rem 的选择？ #####

> 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
> 
> 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

[SouthEast]: /images/20220601/dd7d5a81143e46f680c0e1768323d809.png