响应式布局基础——rem

React Redux ES6 Webpack...... 更多干货在个人主页中查看

rem 方案是响应式布局方案的一部分

什么是rem

rem是根元素字体的单位,比如 html{font-size:16px;},1rem相当于16px。

不仅仅可以给字体用,其他px单位的都可以用,比如设padding:2rem,相当于32px。

rem有什么用

放弃px单位,使用rem作为单位,这样在不同尺寸的设备上,通过修改根节点的font-size大小,实现等比例缩放。

假设设备宽度为600px,页面只有2个在一行的div,使用rem宽度如下设置

响应式布局基础——rem

现在换到宽度为400px的设备上,保持比例相同,只有改变font-size即可

//在js计算字体大小,x为缩小比例 400/600=x/10 x=6.6

响应式布局基础——rem

为什么不用百分比呢?岂不是很简单

百分比是相对于父元素计算的,使用不方便,而且rem多了个字体变化。

如何使用

1 . 给根元素设置字体大小,并在body元素校正

响应式布局基础——rem

如上设置后,使用rem代替px,直接除100即可

响应式布局基础——rem

2 . 绑定监听事件,dom加载后和尺寸变化时改变font-size

响应式布局基础——rem

自动转换成rem

这种px转rem完全可以用 实现自动转换,比如使用 postcss(待后续补充)

A & Q

  • 为什么不设置 font-size:62.5%?

    因为谷歌有些版本不支持10px大小的字体

  • 为什么不使用 em?

    同百分比一样,相对于父元素计算不方便

  • 为什么不使用 viewport等比缩放?

    viewport的做法:

 

 这种做法是将屏幕等比缩放,缩放过大时会失真

  • 使用rem web就是响应式的了吗?

    不是,rem只是等比缩放,只解决了响应式布局的准则 的部分问题 ,还需要配合媒体查询等

响应式布局基础——rem


分享到:


相關文章: