媒体查询和多列布局

媒体查询语法:

@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;避免中断

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

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

上一篇:week07


下一篇:Jmeter系列(16)- 常用断言之Xpath断言