- 编程笔记/
font-size设置为62.5%的意义
目录
1.发现 #
最近发现一个好看的博客主题,兼容桌面与移动端。我粗浅的研究了一下它的源码,在css中有一个片段引起了我的注意。
|
|
2.分析 #
在移动端适配中常见的方案有两种,分别是以rem
为尺寸单位和px
为尺寸单位,以100px/320px/360px/400px/640px等屏幕尺寸为节点,逐步增大font-size的值。
而在这个例子中,font-size设置为62.5%,显然是开发者刻意为之,也是实现大小自适应关键的一步。这种做法不同于常规适配方案,它不需要针对不同的尺寸对font-size进行设置。
一般的,各大主流浏览器的font-size默认值为16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦,比如0.75rem=12px。
为了更方便的进行换算(比如1:10),就可以加样式:
html,body{
font-size: 62.5%;
}
2.1优点 #
设置了62.5%以后就有1rem=10px,便于用rem指定元素的尺寸(比如1.2rem=12px,1.4rem=14px),这样响应式设计的时候就可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。
- 便于计算
- 无需为了适配不同尺寸(移动端),而重新计算样式
2.2不足 #
font-size: 62.5%
的便利性是有局限的,如果把内容放到尺寸更大的桌面端,随着整体尺寸放大,其中的文字图像等占据了过大的面积最终仍会影响显示效果,所以如果做到多端适配需要对页面各个区块做响应。
3.反思 #
其实,当前比较火的一些css的框架,如TailwindCSS
,提供工具类,方便设置字体大小,也有尺寸断点前缀更便于多端适配,大大方便了我们的同时,也让我们逐步减少了对底层的思考。并且框架的出现,实则本质上是设计规范化、趋同化的表现。那么至此留给程序员思考的空间还剩多少呢?
选择62.5%而非10px的原因,主要是兼容性和未来发展趋势的综合考虑,px这个单位的含义已经越来越混乱,
几乎无法评估以后的设备是会一直像现在这样对网页上的px做兼容处理,还是让px回归“像素”的本意,
但62.5%代表默认字体尺寸的62.5%这个含义基本不会有混乱。
这段是话我相关文章上看到的一些关于px单位的思考,年代久远,但是觉得很有意思。不管做设计还是开发,我们都要思考总结,否则就会固步自封。