响应式布局采用Rem结合媒体查询实现

1.rem单位

rem与em的区别：

• rem是一个基准单位，在HTML中用于表示字体大小。
  • em也是一个基准单位，在当前元素及其父级元素中用于表示字体大小。

rem相对于em的优势：

rem单位基于单一的HTML元素设计，在任何情况下仅需调整该元素即可实现跨设备一致性展示效果。然而，在多个位置上使用em作为基准可能会导致难以统一管理

2. 媒体查询

上文已知在不同屏幕尺寸情况下可以通过调节html字体尺寸来实现页面样式调整问题：如何根据不同的屏幕尺寸来调节html字体的大小呢？

媒体查询基础语法：

    @media screen and (max-width:800px)
    {
    	body {
          background-color: pink;
         }
    }

这个媒体查询的意思：当屏幕宽度小于等于800px时，设置body背景色为pink。

下面实现在不同屏幕大小呈现不同的背景颜色：

        /* 1. 小于540px 页面的背景颜色变为蓝色 */
        @media screen and (max-width: 539px) {
            body {
                backgro