关于css中的em单位

最新推荐文章于 2024-05-21 19:02:25 发布

叶ch楼喽

最新推荐文章于 2024-05-21 19:02:25 发布

阅读量1k

点赞数

分类专栏： CSS/CSS3 文章标签： css px与em

CSS/CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用px定义字体的话无法用浏览器字体放大功能，还有在做响应式网页时，字体响应大小也非常不方便。

px：像素（plxels），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em：相对长度单位。相对于当前对象内文本的字体尺寸（em是基于排版转换的一种量度，在css中em的大小参考字符框的高度）。

默认1em=16px，那为什么等于16px？因为浏览器默认的字体大小都是16px，所以没有重新设置浏览器默认字体大小的话1em就等于16px。在页面里要用到em作为单位的话，默认的1em=16px会使得在计算他们转换的值时非常不方便，比如我要把一个块里面的内容字体大小设置成18px，但我只想用em做为单位，那么情况就会这样，1em=16px，1px=0.0625em，得18px=1.125em（0.0625em*18）。擦，多麻烦！所以为了简化px和em之间的换算，需要在body里定义font-size:62.5%，即将浏览器初始化为即1em=10px，这样的话，上面的font-size:18px就等于font-size:1.8em。

上面说过在em的大小参考字符框的高度，所以在css其他属性中，包括width,height,margin,padding,text-indent等使用em作为单位的话，大小计算也跟计算font-size一样的道理。

计算公式：1/父元素font-size值*需要转换的px=em值 (PS:父元素font-size的单位没有关系，无论px还是em)

不过如果当一个元素本身设置了字体大小，其自身的width，height，margin，padding等属性是以自己的font-size值去计算em的值，在这个元素下的子元素也同理。

所以当元素自身有设置font-size时，除font-size外其他属性的计算公式应该是这样：

1/元素自身的font-size值*需要转换的px=em值

在响应式中的应用

在响应式网页中，字体在不同尺寸的设备下要有不同的大小，以达到最佳的阅读效果，比如一个响应式页面在手机和平板里的字体大小是不一样的，所以用em作为字体大小单位的话，在响应式布局中改变字体大小非常方便。

 
XHTML
 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
         21 
       
         22 
       
         23 
       
         24 
       
         25 
       
         26 
       
         27 
       
         28 
       
         29 
       
         30 
       
         31 
       
         32 
       
         33 
       
         34 
       
         35 
       
         36 
       
         37 
       
         38 
       
         39 
       
         40 
       
         41 
       
         42 
       
         43 
       
         44 
       
         45 
       
         46 
       
         47 
       
         48 
       
         49 
       
         50 
       
         51 
       
         52 
       
         53 
       
         54 
       
         55 
       
         56 
       
         57 
       
         58 
       
         59 
       
         60 
       
         61 
       
         62 
       
         63 
       
         64 
       
         65 
       
        <!DOCTYPE html> 
       
        <html> 
       
        <head> 
       
        <meta 
        content 
        = 
        "width=320,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" 
         
        name 
        = 
        "viewport" 
        > 
       
        <metacharset 
        =utf 
        -8 
         /> 
       
        <title> 
        JS Bin 
        </title> 
       
        <style> 
       
        * 
        { 
        padding 
        : 
        0 
        ; 
        margin 
        : 
        0 
        ; 
        } 
       
        body 
        { 
        font-size 
        : 
        100% 
        ; 
        } 
       
        h1 
        { 
        font-size 
        : 
        2.4em 
        ; 
        } 
       
        h2 
        { 
        font-size 
        : 
        2em 
        ; 
        } 
       
        p,a 
        { 
        font-size 
        : 
        1.6em 
        ; 
        } 
       
        .header-title 
        { 
        text-align 
        : 
        center 
        ; 
        padding 
        : 
        20px 
         
        0 
        ; 
        background 
        : 
        #ccc 
        } 
       
        .header img 
        { 
        width 
        : 
        160px 
        ; 
        border-radius 
        : 
        50% 
        ; 
        background 
        : 
        #eee 
        ; 
        } 
       
        .header-menu 
        { 
        line-height 
        : 
        60px 
        ; 
        background 
        : 
        #eee 
        ; 
        text-align 
        : 
         
        center 
        ; 
        } 
       
        .mod-article 
        { 
        background 
        : 
        #ddd 
        ; 
        padding 
        : 
        20px 
        ; 
        margin-bottom 
        : 
        5px 
        ; 
        } 
       
        .footer 
        { 
        line-height 
        : 
        100px 
        ; 
        background 
        : 
        #ccc 
        ; 
        text-align 
        : 
         
        center 
        ; 
        } 
       
        @media screen and (max-width: 800px) { 
       
          body{font-size:87.5%; 
        } 
       
        } 
       
        @media screen and (max-width: 320px) { 
       
          body{font-size:62.5%; 
        } 
       
        } 
       
        </style> 
       
        </head> 
       
        <body> 
       
        <div 
        class 
        = 
        "container" 
        > 
       
        <div 
        class 
        = 
        "header" 
        > 
       
        <div 
        class 
        = 
        "header-title" 
        > 
       
        <img 
        src 
        = 
        "#" 
         
        alt 
        = 
        "" 
        > 
       
        <h1> 
        囧橙 
        </h1> 
       
        <p> 
        前端收藏夹 
        </p> 
       
        </div> 
       
        <div 
        class 
        = 
        "header-menu" 
        > 
       
        <a 
        href 
        = 
        "#" 
        > 
        菜单 
        </a> 
       
        <a 
        href 
        = 
        "#" 
        > 
        菜单 
        </a> 
       
        <a 
        href 
        "#">菜单</a> 
       
        <a 
        href 
        = 
        "#" 
        > 
        菜单 
        </a> 
       
        </div> 
       
        </div> 
       
        <div 
        class 
        = 
        "content" 
        > 
       
        <div 
        class 
        = 
        "content-main" 
        > 
       
        <div 
        class 
        = 
        "mod-article" 
        > 
       
        <div 
        class 
        = 
        "mod-article-box" 
        > 
       
        <div 
        class 
        = 
        "mod-article-content" 
        > 
       
        <h2> 
        我是标题 
        </h2> 
       
        <p> 
        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容 
        </p> 
       
        </div> 
       
        </div> 
       
        </div> 
       
        <div 
        class 
        = 
        "mod-article" 
        > 
       
        <div 
        class 
        = 
        "mod-article-box" 
        > 
       
        <div 
        class 
        = 
        "mod-article-content" 
        > 
       
        <h2> 
        我是标题 
        </h2> 
       
        <p> 
        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容 
        </p> 
       
        </div> 
       
        </div> 
       
        </div> 
       
        </div> 
       
        </div> 
       
        <div 
        class 
        = 
        "footer" 
        > 
        <p> 
        底部在此 
        </p> 
        </div> 
       
        </div> 
       
        </body> 
       
        </html>

运行以上代码，改变窗口大小，可看到当窗口大小大于或小于指定尺寸时字体会随着变化，在所有字体都用em作为单位的情况下，只需要改变body{font-size:xx%}即可，当然这只是随便举个简单的例子，看具体情况去设置。

em有如下特点：

1、em的值并不是固定的；

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

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

1、body选择器中声明Font-size=62.5%；

2、将你的原来的px数值除以10，然后换上em作为单位；

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

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

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

原文链接1

原文链接2