多列设置，媒体查询

多列多栏设置

/* 设置分栏栏数 */ column-count: 3;

/* 每一栏的宽度 */ column-width: 400px;

/* 栏与栏之间的间隔 */ column-gap: 50px;

/* 设置内容自适应栏高度，内容会填充满栏的高度 */ column-fill: auto;

/* 根据内容和栏数自适应高度，高度由内容决定 */ column-fill: balance;

/* 设置栏与栏之间的分割线，类似border-right */ column-rule: 3px solid black;

/* 避免分列，可以放一列 */ break-inside: avoid;

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体查询操作方式

对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

媒体查询语法

@media screen and (min-width:320px) and (max-width:750px){ body {
background-color:blue;} } only有时在支持媒体查询的浏览器中没有区别
在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。（由于没有only这种媒体类型，因此将不会被应用
如果不带only，在不支持媒体查询的浏览器中，将被解析为screen，将会被应用到屏幕类型设备上

设备类型（默认为all）

• screen 是媒体类型里的一种，

• CSS2.1定义了10种媒体类型 and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

• (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。