当前位置: 代码迷 >> Web前端 >> 用一致的方式设置网站的字体大小
  详细解决方案

用一致的方式设置网站的字体大小

热度:6   发布时间:2012-11-25 11:44:31.0
用统一的方式设置网站的字体大小
定下了规矩都很难遵守啊,哈哈。。。


通常我们做网页的时候,会到处定义字体的大小,几乎每个需要定义的地方都定义。
font-size:16px;
等类似的CSS定义可以说充斥着整个网站。

可是我们发现,当我们哪一天老板说:“将这个网站的所有字体放大一号”

那对于上述的网站绝对是一个噩梦,怎么解决这个问题?



我们可以利用EM单位和百分比来控制字体的大小,总结如下:

像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸

其实EM就是百分比的小数表示方式,例如
100% = 1em
105% = 1.05em
90% = 0.9em
以上都是等价的

而百分比或EM的大小单位会由父元素继承而来,于是我们就可以在body上来统一控制整个页面的字体大小,而且利用这种方式,用户还可以使用浏览器的功能来改变字体的大小。

值得注意的是,几乎所有的浏览器默认的字体为16px。
换句话说,我们可以在body上定义font-size:10px;

那么所有body的子元素上定义font-size时,都会基于它的父元素
100% = 1em = 10px;






好了,继续加班