前端开发之字体大小px，em，rem，pt

admin管理员组

文章数量:1794759

前端开发之字体大小px，em，rem，pt

在前端开发中尤其是响应式的开发中，字体的大小在不同的屏幕尺寸下发生变化，从而使画面更优的呈现。

下面说一下常用的字体大小的标示方式:

1：px：

这个应该是国内使用较多的单位，意思为像素。因此，其视觉的呈现效果是与分辨率相关的。例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”，这里的“小”只是视觉的，其实大小是一致的。默认浏览器采用16px的呈现方式，如下：

    <div class="div1">       div1 div1 div1       <div class="div2">           div2 div2 div2           <p>ppppppppp</p>       </div>     </div>

浏览器查看效果：

如果设置div2的font-size为百分数%，如120%：

2. em：

相比国内来说，国外的站点更偏向于使用em，不仅是在font-size上，在margin和padding等上面也会使用，如知名的css设计网站-css禅意花园，www.csszengarden/。1em=16px；子元素的em的大小并不是具体固定的，子元素的em是在父元素的基础上计算的，如下：

.div2{         font-size:2em; } p{         font-size:1em;       }

图1：

图2：

可以看到虽然元素p的大小为1em，而它的父元素div2的字体大小为2em，但计算后它们的大小是一致的，都是32px，因此em在子元素中其实是相对父元素来说的比例，此处可以理解为元素p的字体大小为div2的字体大小的1倍，如果p的字体大小为2em，则其计算的大小为64px，如下图：

      .div2{         font-size:2em;       }       p{         font-size:2em;       }

图例：

如果p元素的字体大小为百分比%话，即直接在父元素的基础上乘以百分数，同px

3：rem：

rem是css3出现的新的字体大小定义方式，其与em的区别是rem总是相对于html的跟元素（html），不会相对父元素，如下：

      html{        font-size:1em;       }       .div2{         font-size:2rem;       }       p{         font-size:1rem;       }

图1：

图2：

可以看到p元素的大小并不像em一样和div2的一样大，而是与html定义的1rem一样大，为16px。

如果p元素的字体大小为百分比%话，即直接在父元素的基础上乘以百分数，同px（即：如果设置百分比，都是相对父元素的）

4：pt：

pt使用的并不多，pt的效果是不随浏览器分辨率的变化而法神视觉的变化，永远看起来一样大。

本文标签： 字体大小pxemrempt