根据内容调整字体大小
https://github.com/davatron5000/FitText.js
使用 rem 做字体长度,便于调整
如果所有的字体大小都使用 rem
单位,那么只要修改根元素 (<html>
)的字体大小,就能修改整个页面的字体。
<html style="font-size: 14px">
Note: 如果不设置,根字体大小一般为 16px
小心 inline 元素之间的空白
一般来说,html元素直接的空白是被忽略的,但是,inline元素,包括 inline-block ,如果元素之间有空白,会render出一定的空白,
类似英文单词之间的空格。不注意这一点会出现奇观的结果,比如:
<label>
<input type="checkbox">
<span>label</span>
</label>
input
和span
,都是inline,为了代码美观他们之间有换行和对齐用的空格,浏览器在显示的时候会在添加空白,造成了莫名其妙的布局问题。
解决这种现象,可以从两个方面入手:
- 去除添加的换行和空格:
<label>
<input type="checkbox"><span>label</span>
</label>
- 改成其他布局,比如
flex
,或者把他们改成display: block
。
在 checkbox 这个使用场景,个人更倾向于第一种方法。