• em,rem,px的实际应用


    看了好多的文章,就只是在看他们的换算,没有实际做出例子所以一直很疑惑,不知道到底是怎么写的。今天写了一个demo。务必彻底弄清楚。

    先说三者的区别:

    首先是我们常见的px.

    px:

    em:相对长度单位。是相对于当前对象内文本的字体尺寸。如 当前对行内文本的字体尺寸未被认为设置,则相对于浏览器的默认字体尺寸

    任意浏览器的默认字体高都是 16px。1em=16px; 12px=0.75em;10px=0.625em;

    所以为了font-size的换算,需要在css中body选择器中声明  Font-size:62.5%;之后的长度只需除以10,然后换上em单位,

    em特点:

    em的值并不是固定的,他会继承父级元素的字体大小。所以必须计算每一层的em数值,会很繁琐,不建议用。

    rem. 相对长度单位。是相对于HTML根元素的。可以做到只修改根元素就成比例的调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

    注:除了IE8以及更早的版本,所有浏览器都支持。(如果是 ie9+的就可以直接用rem,如果是考虑兼容性的就是 px,rem一起用。)

    p{font-size:14px;font-size:0.875rem;}  14/16=0.875

    移动版的,

  • 相关阅读:
    CSP-201512
    SCC-Tarjan
    CSP-201509
    Codeforces Round #612 (Div. 2)/A/B/C/D
    CF-Hello 2020/A/B/C
    Anaconda介绍、安装及使用教程
    Linux 新手应该知道的 26 个命令
    Python编码规范:IF中的多行条件
    Python assert 断言函数
    数据结构常见的八大排序算法(详细整理)
  • 原文地址:https://www.cnblogs.com/zxhh/p/7833842.html
Copyright © 2020-2023  润新知