在写前端的时候,字体与对应盒子的大小的关系总是很难处理。窗口缩小的时候,总是遇到盒子被撑的过大,或者在窗口缩小的时候字体显得很小。整理了常用的几种字体大小设置,以后要清楚很多了。
1.px 像素
px是相对单位。像素px是相对于显示器屏幕分辨率而言的。
优点:
1.能够很精确的调字体的大小,稳定。
缺点:
1.在刚开始的时候经常使用,但是在制作响应式的时候十分不方便,需要利用@media的媒体查询,但是依旧在缩放的时候依旧会有不平滑的,相对突兀的字体变化。
2.em
em也是相对单位,与px相比不同的是,em的参照物是父级元素的字体大小(font-size)。例如:父级元素font-size为16x,那么子级元素 1em=16px。父级上一级没设置则继续向上级查找(font-size具有继承性),浏览器默认的字体大小是16px。
优点:
1.em可以继承父级元素的大小。
缺点:
1.em的大小过于依赖父级元素字体大小。
3.rem
rem也是相对单位,但是不同的是,rem的大小是相对根节点html字体的。
优点:
1.rem相对根节点的大小,便于调整字体大小。
4.vw,vh
vw是相对当前可视窗口(viewport)的宽度,1vw=1%(viewport)。
vh是相对当前可视窗口(viewport)的高度,1vh=1%(viewport)。
总结:在使用的时候,使用合适的单位很重要,对响应式影响很大。感觉在响应式中vw,vh的使用要更好用点,但那也不是绝对的,不同的地方要选择合适的字体大小设置吧。
补:vw,vh单用设置字体好像是不合适的,虽然没有字体突变的情况,但在界面缩到一定程度的时候好像会出现字体特别小的情况。但是利用vw,vh根据可视窗口的会变化大小的特性,以及rem会根据根节点html的font-size大小变化的特性,只要设置合适的式子,那么可以很好地设置字体大小。
html
{
font-size: calc(16px + 8 * (100vw - 600px)/400);
}
利用css3的calc()属性,例如100vw在[600px,1000px]之间,那么1rem可以控制在[16px,24px],当然如果不合适可以换成你觉得合适的式子。