rem实现自适应

Posted 2021-01-11 ww01

总结一下，rem实现自适应：用rem代替px，配合媒体查询设置font-size

首先，px是死的。若一律用px，那就会大的显得小，小的屏幕显得大。其次，rem是活的，通过设置字体大小可以引起rem的改变，为什么？

①因为rem和px有一个对应关系，因为对应关系是固定的，举个栗子：5对应15,15对应25，对应关系是差为10，但是其实这个不太利于口算，但是如果我们把它写成0对应10,10对应20，对应关系没变，但是就利于 口算 了。一般来说 ，浏览器默认字体大小是16px，设置62.5%后就有1rem = 10px，于是就利于计算了

为什么不直接设置font-size:10px?

chrome显示时，字体大于等于12px，若你设置的字体小于12px，则显示为12px，Safari应该是可以显示小于12px的字体大小；因此，只能用百分比去设置。