响应式布局中字体单位的问题，不能单纯的把字体单位设置为PX。因为我们要考虑到不同终端，不同分辨率的问题。目前网页上字体大小有常见三种单位，px、em、pt。

下面来具体介绍一下前两者

PX

px是pixel缩写，是像素单位，在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但1024×768下，则只占约1/10。所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位），甚至会看不清，影响浏览。因为像素点是受分辨率影响的。

EM

em：即％，是相对单位，是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。，一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。

在一个页面上给定了一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以自由缩放,比如用来制作可伸缩的样式表。

例如：浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px，也就是说1px=0.0625em。为了简化font-size的换算，可以在css中的body中先全局声fontsize=62.5%，也就是定义了默认字体大小为16px*0.625=10px,子元素会继承父级元素的字体大小，于是1em=10px，所以12px=1.2em。px与em的转换通过10就可以得来。但是定义fontsize=0.625em或者直接定义12px，这是没有效果的。

所以em的值并不是固定的，em会继承父级元素的字体大小。

说到em这里就需要提一下rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

不管是移动端还是PC端，由于不同分辨率的适配，具体来说，如果你写固定px，那么要么小的放不满，要么大的有大片留白。然而用rem可以有效解决这个问题。 

肯定还有其他的一些字体单位，例如rpx 、vx等

PT

pt:点，印刷常用的单位。word文档中字体单位。等于1/72英寸，网页中现在用的很少了

1pt= (DPI / 72) px

当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 )， 1pt=1px; 当新建画布分辨率为72*2=144ppi时，1pt=2px

所以问题的根源，在于屏幕上的一切字号单位（px,pt,em）都是相对单位，单凭它们并不能确定文字的实际大小。何况人对文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。 所以为了保证浏览器下字体均可缩放，技术语言的字号选择是em,一般来说浏览器默认16px=1em  14px=0.875em   18px=1.125em

使用字号缩放时，字号单位最好使用百分比，不是固定单位。

第一次写欢迎大家来拍砖。

Powered by Froala Editor