react-redux和redux

响应式布局基础——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元素校正

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

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

自动转换成rem

这种px转rem完全可以用 webpack 实现自动转换，比如使用 postcss（待后续补充）

A & Q

• List item为什么不设置 font-size:62.5%？

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

• List item为什么不使用 em？

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

• List item为什么不使用 viewport等比缩放？

  viewport的做法：

　<meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">

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

• List item使用rem web就是响应式的了吗？

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