less + rem布局

流式布局和响应式布局只能让宽度进行改变，并不能让元素的高度也随设备尺寸进行改变，那么就可以使用响应式布局 + rem单位 的方式让高度进行适应，而使用less开发可以更好的维护。
什么是rem
em 单位是基于父元素文字大小的单位
rem 是基于html标签（根元素）文字大小的单位
rem适配 通过控制html的大小 控制页面上所有的rem为单位的基准值
rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度

// 变量模块
@charset "UTF-8";
@adapterDviceList: 750px, 720px, 700px, 640px, 540px, 480px, 424px, 414px, 400px, 384px, 375px, 360px, 320px;     // 主流移动端设备尺寸
@baseWidth: 750px;     // 设计稿宽度
@baseFontSize: 100px;    // 预设的基准值  在设计稿上的html文字大小
@len: length(@adapterDviceList);    // 主流设备尺寸变量的长度，adapterDviceList这个数组的长度

// mixins 混入模块
.adapterMixins(@index) when (@index > 0) {     // less 中没有for循环 ， 用when条件判断来进行循环
    @media (min-width: extract(@adapterDviceList,@index)) {   // extract 是less内置函数 用来取数组中对应序号的值  less中的索引是从1开始的
        html {         // 设置不同尺寸下rem基准值
            font-size: @baseFontSize  / @baseWidth * extract(@adapterDviceList,@index);
        }
    }
    .adapterMixins(@index - 1);     // 循环判断
}
.adapterMixins(@len);     // 使用混入  传入参数  这里传入length的原因在于，设备尺寸是从大往小写的，生成出的响应式从上往下是  从大到小的， 大尺寸上的样式会被覆盖，应该倒过来

之后的容器width和height可以用rem作为单位，值需要换算