UI培训之移动端rem变革（二）

　　流式布局的缺点：在大屏幕手机下显示效果会变成一些页面元素宽度拉长，但高度和原来一样，实际显示非常不协调，这是最致命的缺点，通常只有几个尺寸的手机效果令人满意，事实上，许多视觉设计师不应该接受这种效果，因为他们的设计图片在大屏幕手机下相当于水平拉长。 rem可以等比例适应所有屏幕rem是通过根元素来适应的。网页中的根元素是指html。我们可以通过设置html的字体大小来控制rem的大小。例如：

　　上述代码结果按钮如下图所示：

　　为了方便我们计算，我将html设置为10px，为什么6rem等于60px。如果是这个时候.BTN的风格保持不变。让我们改变html的font-size值，看看上面的按钮有什么变化：

　　按钮大小结果如下：

　　事实上，我们可以从上述两个案例中计算出1px的rem:

　　第一例：

　　120px = 6rem * 20px(根元素设置大值)

　　第二个例子：

　　240px = 6rem * 40px(根元素设置大值)

　　推算出：

　　10px = 1rem 在根元素(font-size = 10px时);

　　20px = 1rem 在根元素(font-size = 20px时);

　　40px = 1rem 在根元素(font-size = 40px时);

　　在上述两个例子中，我们发现第一个案例按钮等比放大到第二个按钮。html元素的font-size的变化会导致按钮的大小发生变化。我们不需要改变之前为按钮设置的宽度和高度。事实上，这是我们最想看到的。为什么这么说?

　　当CSS初始化时，我们引用这段CSS：

　　此时，如果通过chrome浏览器的调试工具切换demo在不同设备下的显示效果，或者通过缩放浏览器的宽度来查看效果，我们可以看到页面的布局是按等比例切换的，无论在任何分辨率下，布局都没有混乱。

　　当然，css的媒体查询并不是很准确，但它已经能够满足一般的需求。下次，我们将继续探索rem的魔力：使用JS动态设置rem，请期待!