响应式字体：自适应视图窗口大小的字体单位

最近在学习Element UI做些响应式页面的练习，其中遇到一个问题就是字体的大小。

之前我都是用rem作为相对尺寸单位来设置字体大小的，但在移动端下显示的效果并不好。

因为rem说到底也是一个“固定”单位，它是依据根元素的字体大小来决定尺寸的。

 

想要个真正意义上的相对尺寸来设置字体，最后就查到了vw、vh、vmin、vmax

 

一个单位相于当前视图窗口大小的1%，宽度和高度是不同的，分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。 

  1vw = 当前视图窗口（viewport）1%的宽度

  1vh = 当前视图窗口（viewport）1%的高度

  1vmin = 1vw 或 1vh， 取决于哪个更小一点

  1vmax = 1vw 或 1vh， 取决于哪个更大一点