美文网首页
CSS单位 px,em, rem

CSS单位 px,em, rem

作者: 焦糖大瓜子 | 来源:发表于2018-11-15 10:44 被阅读0次

    px 像素,固定单位,页面缩放不改变大小

    em 值不固定,会继承父级元素的字体大小,代表倍数

    用法技巧:
    1.通常浏览器默认样式16px,若子元素设定为1.2,结果为19.2px,出现非整像素数的误差。
    2.将body的font-size设置为62.5%,即10px,那么其余子元素设定,如1.3em即 13px。可以避免非整像素数。

    // html

    <body>10px <span>16px</span></body>
    

    // css

    body  {font-size: 62.5%}
    span {font-size: 1.6em;}  // span渲染结果为16px
    

    rem 值不固定,是基于根原始<html>的,代表倍数

    rem values are relative to the root html element, not the parent element

    html { font-size: 62.5%; }
    span {  font-size: 1.6rem; } // span 渲染结果为16px
    

    相关文章

      网友评论

          本文标题:CSS单位 px,em, rem

          本文链接:https://www.haomeiwen.com/subject/gfbefqtx.html