页面字体适配（media query )， em的使用

首先来说说em的使用

用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。

而“em”是一个相对的大小，是其相对于元素父元素的大小。比如说：如果在一个< div >设置字体大小为“16px”，此时这个< div >的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.875em”，那么其字体大小计算出来后就相当于“0.875 x 16px = 14px”。

如果用户通过浏览器的UI控件改变了文字的大小，那么我们整个页面也会进行放大（或缩小），使用em布局的话页面很灵活，不至于用户改变了浏览器的字体后会致使整个页面崩溃。

设置html的font-size

首先把html的font-size设置为10px（0.625em或62.5%），这样设置可以方便子元素的计算。例如子元素字体大小设置为1.4em,其计算出来的实际大小就为14px（1.4em x 10px = 14px）。

html 
    font-size: 10px;/*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.6em;/*1.6 × 10px = 16px */
}

因为要做字体的适配，在这里对html的font-size设置媒体查询。

例如对于pad，竖屛，我希望字体更大一些，将html的font-size设置为12.5px；则body字体大小变为1.6 × 12px = 20px 。

@media screen and (min-width: 640px)  and (max-width: 768px) and (orientation: portrait){
    html {
        font-size: 12.5px;
    }
}

对于更小的屏幕（手机），竖屛，我希望字体相对较小一些，将html的font-size设置为10.5px；则body字体大小变为1.6 × 11.25px = 18px 。

@media screen and (max-width: 640px) and (orientation: portrait) {
    html {
        font-size: 11.25px;
    }
}