zoukankan      html  css  js  c++  java
  • 彻底弄懂响应式设计中的em和rem

    前一阵子在响应式开发中遇到了em和rem的问题,也上网搜过一些文章,篇幅很长,也没有仔细看,今天来总结一下。

    rem是指:根元素(root element,html)的字体大小,

    em是指:父元素的字体大小。

    下面看一个例子:

      

    div{
    font-size: 30px;
    }
    div span{
    font-size: 2em;
    }
    
    
    
    <div>
    div下的元素
    <span>span里的元素</span>
    </div>
    

      在chrome中显示:

    也就是说,span里的文字大小是根据父元素div的font-size大小设置的。

    测试rem的代码和运行结果就不贴上来了

    body{

      font-size:16px;

    }

    p{

      font-size:2rem;/*此时p元素中的文字size为32px;

    }

    可以设置body的font-size为62.5%,也就是10px(比如浏览器默认字体大小16px),1.3rem=13 px,计算方便点;

    注:可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值。

    文章为原创,转载请注明出处,谢谢

  • 相关阅读:
    Burp suite
    CTF 压缩包分析
    PHP代码审计
    SQL注入
    常考文件包含漏洞
    PHP黑魔法
    CTF WEB笔记
    MsSQL数据库提权
    ATT&CK实战系列
    Linux访问控制
  • 原文地址:https://www.cnblogs.com/gagag/p/6080500.html
Copyright © 2011-2022 走看看