本文介绍了rem作为响应式布局方案的一部分，解释了rem的概念和用途，指出其相对于px和百分比的优势。通过设置根元素字体大小和使用自动转换工具，结合React-Redux应用，探讨了如何在不同设备上实现等比例缩放。同时，讨论了不推荐使用百分比、em和viewport单位的原因，并强调rem仅解决部分响应式问题，需结合媒体查询等方法。
响应式布局基础——rem
rem 方案是响应式布局方案的一部分
什么是rem
rem是根元素字体的单位，比如 html{font-size:16px;}，1rem相当于16px。
不仅仅可以给字体用，其他px单位的都可以用，比如设padding:2rem，相当于32px。
rem有什么用
放弃px单位，使用rem作为单位，这样在不同尺寸的设备上，通过修改根节点的font-size大小，实现等比例缩放。
假设设备宽度为600px，页面只有2个在一行的div，使用rem宽度如下设置
现在换到宽度为400px的设备上，保持比例相同，只有改变font-size即可
为什么不用百分比呢？岂不是很简单
百分比是相对于父元素计算的，使用不方便，而且rem多了个字体变化。
如何使用
1 . 给根元素设置字体大小，并在body元素校正
最低0.47元/天 解锁文章
扫一扫
4154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
