zoukankan      html  css  js  c++  java
  • 响应式布局中为什么要使用em设置字体大小而不用px

    px像素(Pixel)。相对长度单位。像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的。(引自CSS2.0手册) 

    1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。 

    px相对的屏幕分辨率,而em相对于父级div,所以在响应式布局中使用em更合适,因为任何浏览器默认字体大小是固定的,而不同设备屏幕分辨率却各不相同。

    em有如下特点: 

    1. em的值并不是固定的; 

    2. em会继承父级元素的字体大小。 

    所以我们在写CSS的时候,需要注意两点: 

    1. body选择器中声明font-size=62.5%; 

    2. 将你的原来的px数值除以10,然后换上em作为单位; 

    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

    <body style="font-size:62.5%"> 1em默认是16px,这里1em变为10px

    <aside style="font-size:1.2em;"> 继承body这里的1.2em是12px

    <p style="font-size:1em;"></p>继承自aside,所以这里的1em也是12px

    </aside>

    </body>

    也就是避免1.2 * 1.2= 1.44的现象。比如说你在aside中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承aside的字体高而变为了1em=12px。

  • 相关阅读:
    SQL总结----存储过程
    SQL SERVER中的二种获得自增长ID的方法
    C#调用存储过程的ADO.Net
    扩展jQuery---选中指定索引的文本
    使用带参数的SQL语句向数据库中插入空值
    js中对小数取整
    Lr原理初识-慧测课堂笔记
    Https 安全传输的原理
    静态性能测试-慧测课堂笔记
    Docker常用命令
  • 原文地址:https://www.cnblogs.com/answercard/p/4950441.html
Copyright © 2011-2022 走看看