如何设置网页字体响应式:
- 使用 vw、vh、vmin、vmax 等浮动单位,根据视口(浏览器可视区域)的宽度或高度动态的更新字体大小。但要注意,视口过小时,可能会使字体也变得异常小,可以通过媒体查询设置小屏幕下的字体大小。
- 利用媒体查询,根据屏幕宽度设置不同的字体大小。
- 使用 rem 单位,rem 会根据根元素(一般指 html)的字体大小来设置。例如根元素字体为 16px,1rem 就是 16px,2rem 就是 32px。另外为了方便计算,我们也可以把根元素字体大小设置为 62.5%,然后 1rem 就是 10px,1.4rem 就是 14px 等。之后修改根元素的字体大小,就能修改所有 rem 单位的字体大小。em 单位同理,只是需要设置对应的父元素字体。
- 利用 calc 函数、固定单位和浮动单位共同设置大小,例如:font-size: calc(16px + 0.5vw)。
- 把字体最大值、最小值以及变化系数定义为 CSS 变量,然后使用 calc() 函数进行计算,这样更方便。