前端响应式布局的五种方式

<meta> 标签概念及其属性解析

<meta 
name=”viewport”  
content=”
        width=device-width,
        user-scalable=no,
        initial-scale=1.0,
        maximum-scale=1.0,
        minimum-scale=1.0
        ”
>

• viewport：视口-显示设备内部，真正实际可用于显示网页的区域大小
• width：视口宽
• device-width：等于物理设备宽
• user-scalable：是否允许用户手工缩放网页
• initial-scale=1.0：加载页面时，页面的缩放比例是1，表示不缩放，原网页大小展示
• maximum-scale=1.0,minimum-scale=1.0：允许用户缩放网页的最大缩放比例和最小缩放比例；都是1，表示不允许用户使用过程中，中途缩放网页

5种响应式布局方式

一：flex布局

• 优点: 代码简单，布局方便
• 缺点：如果中间有内容，缩到最小就不会在小了；且左右侧的宽度变小了；

二：父相子绝

• 结合使用media可以实现响应式布局
• 缺点：代码写法复杂，布局较繁琐；如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧；

三：grid布局

概念：Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局；

• 优点：Grid布局远比 Flex布局强大。
• 缺点：学习成本过高；存在兼容性问题；目前兼容性不如flex； 学习路径：www.jianshu.com/p/3762f214c…

四：float布局

• 老的写法了，没啥优点；
• 缺点：容易被挤压换行

五：使用rem作单位，等比缩放；结合calc(),更好；

操作：首先，给根元素html设置一个字体大小，其他尺寸单位全部用 rem，监听屏幕的大小，根据屏幕的大小按比例改变根节点字体的大小。
原理：因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的，所以，根节点字体大小一变，其他所有尺寸都会按比例变大、或小。
代码示例：

let resize = function(){
    let designSize = 1920; //默认设计图尺寸 1920*1080
    let html = document.documentElement;
    let wW = html.clientWidth; //窗口宽度
    let rem = (wW*100)/designSize;  //1rem = 100px
    html.style.fontSize = rem + 'px'; // 注入html
};
resize();//初始化
window.addEventListener('resize', resize, false); //绑定到窗口事件中

注意：大部分浏览器的字体有个最小值：12px。也就是缩小到 12px 后，字体不会继续缩小。