在写前端的时候，字体与对应盒子的大小的关系总是很难处理。窗口缩小的时候，总是遇到盒子被撑的过大，或者在窗口缩小的时候字体显得很小。整理了常用的几种字体大小设置，以后要清楚很多了。
1.px 像素
px是相对单位。像素px是相对于显示器屏幕分辨率而言的。
优点：
1.能够很精确的调字体的大小，稳定。
缺点：
1.在刚开始的时候经常使用，但是在制作响应式的时候十分不方便，需要利用@media的媒体查询，但是依旧在缩放的时候依旧会有不平滑的，相对突兀的字体变化。
2.em
em也是相对单位，与px相比不同的是，em的参照物是父级元素的字体大小(font-size)。例如：父级元素font-size为16x，那么子级元素 1em=16px。父级上一级没设置则继续向上级查找(font-size具有继承性)，浏览器默认的字体大小是16px。
优点：
1.em可以继承父级元素的大小。
缺点：
1.em的大小过于依赖父级元素字体大小。
3.rem
rem也是相对单位，但是不同的是，rem的大小是相对根节点html字体的。
优点：
1.rem相对根节点的大小，便于调整字体大小。
4.vw，vh
vw是相对当前可视窗口（viewport）的宽度，1vw=1%（viewport）。
vh是相对当前可视窗口（viewport）的高度，1vh=1%（viewport）。
总结：在使用的时候，使用合适的单位很重要，对响应式影响很大。感觉在响应式中vw，vh的使用要更好用点，但那也不是绝对的，不同的地方要选择合适的字体大小设置吧。
补：vw，vh单用设置字体好像是不合适的，虽然没有字体突变的情况，但在界面缩到一定程度的时候好像会出现字体特别小的情况。但是利用vw，vh根据可视窗口的会变化大小的特性，以及rem会根据根节点html的font-size大小变化的特性，只要设置合适的式子，那么可以很好地设置字体大小。
html
{
font-size: calc(16px + 8 * (100vw - 600px)/400);
}利用css3的calc（）属性，例如100vw在[600px,1000px]之间，那么1rem可以控制在[16px,24px]，当然如果不合适可以换成你觉得合适的式子。