响应式字体大小

在做响应式布局的时候，我们可以使用media媒体查询)来设置元素大小和元素的排版，也可以利用bootstrap这一个就我目前使用过开发项目的框架来说。可以用它定义好的类实现响应式，但是页面中有时候字体也是需要在不同屏幕下显示不同大小比例使网页结构更加美观简洁。

第一种方式
bootstrap中也提供了启用响应字体大小的选项，官网，默认情况下是没有响应式的。这个时候需要去按照官网说的将 $enable-responsive-font-sizes Sass 变量更改为true并重新编译Bootstrap来启用responsive-font-sizes.

第二种方式
自定义自己的响应式字体大小。首先需要先了解css中的单位 rem ，vw。
*rem 我之前的博客有讲过，可以去看看。
这里讲一下 vw ：
提到 vm 就顺便把相关的另外两个单位 vh vm 一起介绍了。

单位	含义
vw	相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度
vh	相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区) 100vh = 可视区高度
vmin/vm	相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）

了解了这些就可以上代码了

h1, .h1 {
    font-size: calc(1.375rem + 1.5vw);
}
h2, .h2 {
    font-size: calc(1.325rem + 0.9vw);
}
h3, .h3 {
    font-size: calc(1.3rem + 0.6vw);
}
h4, .h4 {
    font-size: calc(1.275rem + 0.3vw);
}
p, .p, span, .span{
    font-size: calc(1rem + 0.9vw);
}

我这里设置了从h1到h4 和 p标签 span标签的字体大小,可以直接复制到你的css文件中。在进行编写运行你就会看到以下效果
完美的响应式。
你也可以结合media(媒体查询) 进行限制响应式字体生效的范围

@media (max-width: 600px) {
	h1, .h1 {
	    font-size: calc(1.375rem + 1.5vw);
	}
	h2, .h2 {
	    font-size: calc(1.325rem + 0.9vw);
	}
	h3, .h3 {
	    font-size: calc(1.3rem + 0.6vw);
	}
	h4, .h4 {
	    font-size: calc(1.275rem + 0.3vw);
	}
	p, .p, span, .span{
	    font-size: calc(1rem + 0.9vw);
	}
}

我设置的在小于600px的情况下启用响应式。