zoukankan      html  css  js  c++  java
  • px和em和rem的区别

    一。px特点:

    1. IE无法调整那些使用px作为单位的字体大小;

    2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

    3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

     

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

    二。em的特点

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

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

    常见写法:

    body {

        font-size: 62.5%;

        /*10 ÷ 16 × 100% = 62.5%*/

    }

    h1 {

        font-size: 2.4em;

        /*2.4em × 10 = 24px */

    }

    p {

        font-size: 1.4em;

        /*1.4em × 10 = 14px */

    }

    li {

        font-size: 1.4em;

        /*1.4 × ? = 14px ? */

    }

    三。rem的特点

    rem是指相对于html根元素的字体大小。除了IE8及更早版本外,所有浏览器均已支持rem。

    常见如下

    html {

        font-size: 62.5%;

        /*10 ÷ 16 × 100% = 62.5%*/

    }

    body {

        font-size: 1.4rem;

        /*1.4 × 10px = 14px */

    }

    h1 {

        font-size: 2.4rem;

        /*2.4 × 10px = 24px*/

    }

    自动换算的网址http://pxtoem.com/

  • 相关阅读:
    自定义Toast
    kafka概念扫盲
    ZooKeeper面试题
    写给程序员儿子的一封信
    hashCode() 和 equals()的问题解答及重写示范
    git下载安装、配置及idea初始化
    配置 git公钥报错:unknown key type -rsa
    Java中的各种锁
    Kafka 基本原理
    MySQL 索引总结
  • 原文地址:https://www.cnblogs.com/luoguixin/p/6142605.html
Copyright © 2011-2022 走看看