分栏、媒体查询、单位

分栏

column-count         列数

column-width        列宽

column-gap        列间距

column-rule        列样式

p{column-count: 4; //栏数 列数
column-width: 200px; //栏宽 列宽
columns: 200px 4;
				//>=800px 按栏数
				//<800px 按栏宽
column-gap: 10px; //栏间距 列间距
column-rule: 1px solid #FF0000; //栏框
}

 缩写

columns : column-width column-count ;

媒体查询

        <style type="text/css">
			.box{
				width: 500px;
				height: 500px;
				background-color: #FF0000;
				transition: 1s;
			}
			@media screen and (min-width:500px) { >=500px
				.box{
					background-color: #00f;
				}
			}
			@media screen and (min-width:800px) { >=800px
				.box{
					background-color: #0f0;
				}
			}
			
		</style>

 meta元数据标签

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

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-

width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）；

height：和 width 相对应，指定高度；

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例；

maximum-scale：允许用户缩放到的最大比例；

minimum-scale：允许用户缩放到的最小比例；

user-scalable：用户是否可以手动缩放，值为"yes"或"no"。

em与rem的区别： 

em  受当前字号大小的影响

rem 受根html标签里字号大小的影响

 如果加上box-size不会影响盒子大小