【HTML5移动开发学习笔记】07-CH11-响应式Web的CSS特性

媒体查询，断点，流失布局

@media:媒体查询
断点breakpoint:
就是你想改变浏览器的大小，并决定需要一种新布局，改变布局的宽度就成为断点。例如320,480,640,960

多栏

CSS columns属性：创建多个栏，像报纸文本一样布局。
columns属性是column-count,columns-width的简写
columns-rule类似于border，其属性有column-rulewidth, column-rule-style,columns-rule-color.

column-span属性的值为all,会使元素能够横跨所有栏。

边框图像

border-image把图像切分为9个区域，利用边框的左右宽度和边框的上下高度把图像的角放入元素的角中。

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-image是以上的简写属性。

1，设置边框图像
border-style唯一必须
例如：border：solid
2，border-image-source

border-image：url("");

3，border-image-slice
定义1-4种长度，用于设置标记区域的图像的每条边缘的距离。
分别代表图像上、右、下、左边缘向里的偏移量。单位像素。
可选fill保存图像中间部分。

border-image:url(stamp.png) 0 5 0 20 fill……

4，border-image-width
设置元素边框的宽度
5，border-image-outset
指定边框图像区域在全部四条边扩展到边框方块之外的数量，默认0
6，border-image-repeat
属性值：
stretch
repeat
round
space

以上属性应用后：

border-image:url(stamp.png)  stretch 0 5 0 20 fill / 0 5px 0 20px;
border-image:url(stamp.png)  round  9 / 9px / 12px

flex

见文章。

@support进行特性检测

提供图像

1，retina 高像素密度的显示屏
2，background-size
3，数据URI
4，精灵Sprite
5，image-set
6，字体图标
7，CSS遮罩-mask
8，客户提示clinet-hints还未实现。