- 多列布局
column-count:num; 分列
column-gap:; 列间隔（单位px）
column-rule:; 分隔线（大小 样式 颜色）
column-fill:;
auto 列高度自适应内容
balance 所有列的高度以其中最高一列统一
column-span:; 是否横跨所有列
none 否
all 横跨所有
column-; 列宽度
break-inside:avoid; 防止断层
^_^
- 响应式布局
优势：一套项目能适配不同设备，灵活
能快捷解决多设备显示适应问题
从显示上看，用户体验更好
劣势：繁琐，代码量大，会出现隐藏无用的元素，加载时间长
开发成本偏高
兼容不同设备，兼容性工作量加大，效率低
方案折中，多方因素影响达不到最佳效果
- 媒体查询
@media all and (条件表达式){
选择器{属性：值}
}
多个条件的写法：
@media all and (条件表达式) and (条件表达式){
选择器{属性：值}
}