多列布局&媒体查询

多列布局：
    column-count：规定元素应该被分隔的列数
    column-fill：
        auto：列高度自适应内容
        balance：所有列的高度以其中最高的一列统一
    column-span：对象元素是否横跨所有列
        none：不跨列
        all：横跨所有列
    column-width：设置每列的宽 与columnn-count有冲突
    columns：复合属性  column-width column-count
        column-width 一般不设置 自适应

媒体查询的概念:媒体查询只是一个工具(不是特定的属性或者属性值)
    媒体查询的作用:通过检测不同的设备特性从而设置不同的css样式
    媒体查询的写法:@media 设备的特性 修饰符号 (条件表达式){ css语法 }
        - @media 声明媒体查询的关键字
        - 设备的特性 电脑、手机、pad的屏幕
        - 修饰符号 常用的是and(连接符号)
        - (条件表达式) min-width/max-width
        - {css语法}
    注意
        - 媒体查询的写法比较特殊 每个英文单词之间都需要加空格符号(不加会不解析代码)
        - 媒体查询会检测特性设置css样式 建议把媒体查询代码写在css样式表的最下面
        - 多个条件的时候 在第一个条件后面使用and继续书写即可
        - 由于市面上的电脑厂商过多，由于质量问题可能会有误差

响应式布局：
优点：
    面对不同分辨率设备灵活性强
    能够快捷解决多设备显示适应问题
缺点：
    兼容各种设备工作量大，效率低下
    代码累赘，会出现隐藏无用的元素，加载时间加长
    其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
    一定程度上改变了网站原有的布局结构，但会出现用户混淆的情况