CSS Tips
2020-10-14 本文已影响0人
forks1990
根据内容调整字体大小
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 这个使用场景，个人更倾向于第一种方法。
