流式布局适配方式：

1、只达到宽度的适配
2、内容没有自适应改变高度，高度也没有自适应改变

rem适配方式：

1、高度和宽度都自适应内容可自适应等比例缩放
2、当我在改变rem的基准值html的字体大小的时候，页面上的容器在等比例缩放

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>rem适配</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            html {
                font-size: 50px;/*把页面所有的px都变成rem*/
            }
            header {
                width: 100%;
                height: 1rem;
                line-height: 1rem;
                text-align: center;
                font-size: 0.48rem;
                color: #fff;
                background-color: #f00;
            }
            /*
             * 1、流式布局适配方式：
             * 只达到宽度的适配
             * 内容没有自适应改变高度，高度也没有自适应改变
             * 
             * 2、rem适配方式：
             *   1、高度和宽度都自适应   内容可自适应  等比例缩放
             *   2、当我在改变rem的基准值html的字体大小的时候，页面上的容器在等比例缩放
             */
            
            /*
             * 3、适配：
             *   假设320px的设备   设置字体的大小是  50px
             *   假设640px的设备   设置字体的大小是  100px
             */
            /*4、使用媒体查询*/
            @media (min-width: 320px) {
                html {
                    font-size: 50px;
                }
            }
            /*5、需要适配移动端主流的设备     有很多    这里以iphone6   375px 为例*/ 
            /*但这个方法比较麻烦，要一个一个适配    用less可以解决这个问题*/
            @media (min-width: 375px) {
                html {
                    font-size: 58.59375px;  /*     375/640*100=58.59375px  */
                }
            }
            @media (min-width: 640px) {
                html {
                    font-size: 100px;    /*   640/320*50=100px    */
                }
            }
        </style>
    </head>
    <body>
        <header>购物车</header>
    </body>
</html>