px,em,rem区别浅谈

px就是像素,是显示器上能显示出的最小的点,是根据屏幕的分辨来确定的基础单位,不同显示器,物理长度不一样.

em、rem在使用的过程中,会按照一定的规则转换成px.

em是根据父级的fon-size来确定的,具有继承性.

比如:

<body>fon-size:16px(默认)

  <div>font-size:10px

    <p>font-size:0.5em -- 10*0.5 = 5px

    <span>font-size:0.5em -- 10*0.5*0.5 = 2.5px

    <p>

  </div>

  <p>font-size:0.5em -- 16*0.5 = 8px

  <span>font-size:0.5em -- 16*0.5*0.5 = 4px

  </p>

</body>

当em设置在html元素上时,它根据浏览器默认的字体大小进行转换,一般默认为font-size:16px,

rem与em使用方法相同,只是,rem是根据网页跟元素的字体大小,即html元素的字体大小,进行转换的.

  

 

posted @ 2018-04-27 15:56  自由影子  阅读(171)  评论(0)    收藏  举报