媒体查询和多列布局

媒体查询语法：

@media screen and (min-width:320px) and (max-width:750px){

body { background-color:blue;}

}

only有时在支持媒体查询的浏览器中没有区别

在不支持媒体查询的浏览器中解析到带only的媒体查询时，会将only视为媒体类型。

（由于没有only这种媒体类型，因此将不会被应用）

如果不带only，在不支持媒体查询的浏览器中，将被解析为screen，将会被应用到屏幕类型设备上

and被称为关键字，其他关键字还包括not（排出某种设备），only（限定某种设备）

设备类型：

all 所有设备

aural 听觉设备

braille 点字触觉设备

handle 便携设备（手机、平板）

print 打印预览图

projection 投影设备

screen 显示器、笔记本..

tty 打字机、终端...

embossed 盲文打印机

样式举例：

/* 打印样式 */

@media print {}

/* 手机等小屏幕手持设备 */

@media screen and (min-width: 320px) and (max-width: 480px) {}

/* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) {}

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) {}

/* 竖屏 */

@media screen and (orientation:portrait) {对应样式}

/* 横屏 */

@media screen and (orientation:landscape){对应样式}

目前常用断点值是：320px、480px、768px和1024px

CSS多列(属性要加前缀)

1、column-count：分栏的个数（元素应该被分隔的列数）

适用于：除table外的非替换块级元素, table-cells, inline-block元素

2、column-width：分栏的宽度

3、column-gap：分栏的间距（列之间的间隔大小）

4、  column-rule：分栏的边框

        column-rule-color：列之间颜色。

        column-rule-style：列之间样式。

        column-rule-width：列之间宽度。

5、column-span：设置或检索对象元素是否横跨所有列。

                                all；横跨所有列

                                none；不跨列

6、column-fill：设置或检索对象所有列的高度是否统一（目前大部分浏览器尚未支持）

                        auto；列高度自适应内容

                        balance；所有列的高度以其中最高的一列统一(默认值)

7、columns设置或检索对象的列数和每列的宽度。

复合属性 columns:300px 3;

<' column-width '> || <' column-count '>

8、break-inside:avoid；避免中断

描述了在多列布局页面下的内容盒子如何中断，

写给多列容器里的中断元素(子元素)