移动端基础知识点（多列、媒体查询、rem单位）

1.多列----按照列划分布局

	column-count---列数，按照几列划分布局
	column-gap----列与列之间的间距，一般不建议调整
	column-width---调整每一列的宽度（会和列数发生冲突）
	划分线
		单一写法：
			column-rule-width: 5px;
			column-rule-color: aqua;
			column-rule-style: dotted;
		简写方式：
			column-rule:5px double red;
	column-fill----用来规定列的高度如何填充的
		auto----尽量让每一列的高度都填充满每一个盒子
		balance----尽量让每一列的高度都保持一致。
	column-span-----横跨列的设置
			all----横跨所有列
			none-----不跨列
	解决断层：break-inside:avoid;

2.媒体查询-----可以实现响应式布局

	响应式布局：就是根据设备的改变而产生出不同的布局效果。
	媒体查询：可以检测设备是否发生改变（用来检测设备的宽度或者高度是否发生改变，一般都是检测宽度的）
	媒体查询语法：@meida all and （条件）{}

rem单位

	相对于html字号而言的，只要html字号发生改变，那么rem也会跟着改变
	
	换算规则
		如果html字号是20px  那么1rem=20px   2rem=40px
		如果html字号是16px  那么1rem=16px   2rem=32px
		
	一般移动端使用的单位大多数都是rem
	需要借助媒体查询和rem单位来达到适配（自适应）的目的
			如果设备宽度大了，就让html字号大一点
			如果设备宽度小了，就让html的字号设置小一点。