响应式字体研究

在我们为了兼容手机端不同屏幕的时候，会遇到很蛋疼的问题，就是字体，如果使用px（像素）的话，会遇到相当尴尬的局面，就是每当屏幕发生改变的时候，我们要调整字体的大小，当我们使用媒体一个一个去修改的时候，不觉得会很蛋疼？所以，我们要使用em大法。首先来介绍一下em，em作为一个单位，可以与px之间进行转换，有一个中间值16px=1em,他们之间有一个转换公式

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

可以根据这个公式算出各种像素的em值。然后讲一下实现响应式字体的思路，因为em的特点是子元素可以根据父元素的font-size来动态修正自己的font-szie。简单来说，子元素的字体大小是相对于父元素的字体大小所以，根据这个特点，设置body的字体大小，作为根元素，另外为了兼容IE，需要设置html的font-size：100%根据父元素的大小，可以对子元素的字体大小做设定，然后我们就可以使用媒体查询对根元素的字体大小进行一个设置

这里总结一下主要流程

• 设置根元素的字体大小，例如body{ font-size:1em }
• 兼容IE浏览器html{font-szie:100%}
• 设置非body元素的大小，可以根据 （1/根元素的font-size*需要转换的px值）算出em的值设置子元素
• 在屏幕发生改变的时候，利用媒体查询对body的font-szie值进行修改，这样就可以修改一个地方，进而修改整一个网页。