响应式布局

• 多列布局

column-count:num; 分列
column-gap:; 列间隔（单位px）
column-rule:; 分隔线（大小 样式 颜色）
column-fill:;
　　auto 列高度自适应内容
　　balance 所有列的高度以其中最高一列统一
column-span:; 是否横跨所有列
　　none 否
　　all 横跨所有
column-width:; 列宽度


break-inside:avoid; 防止断层

^_^

• 响应式布局

优势：一套项目能适配不同设备，灵活
　　　能快捷解决多设备显示适应问题
　　　从显示上看，用户体验更好
劣势：繁琐，代码量大，会出现隐藏无用的元素，加载时间长
　　　开发成本偏高
　　　兼容不同设备，兼容性工作量加大，效率低
　　　方案折中，多方因素影响达不到最佳效果

• 媒体查询

@media all and (条件表达式){
　　选择器{属性：值}
}
多个条件的写法：
@media all and (条件表达式) and (条件表达式){
　　选择器{属性：值}
}