css3分栏，响应式布局

一、分栏。

* column-count：auto | 整数；---控制栏数
* column-width：length；---每栏的宽度
* column-gap : length ;---两栏之间的间距
* column-rule : 宽度，线型，颜色；---栏与栏的间隔线
* 类似border，solid | dotted | dashed   实线 | 点线 | 虚线 
* column-width和column-count可以让一个元素进行多列布局
* column-gap和column-rule就处在相邻两列之间

* column-span : all / none ;    是否跨栏显示

二、弹性布局（box-flex）。
* 优点：
* 1 适应性强，在做不同屏幕分辨率的界面时非常实用
* 2 可以随意按照宽度、比例划分元素的宽高
* 3 可以轻松改变元素的显示顺序

* 4 弹性布局实现快捷，易维护

1).display : box； 将一个元素的子元素以弹性布局进行布局
  box-orient：horizontal | vertical | inherit   子元素的排列方式
            横向           竖向            继承
  box-direction：normal | reverse | inherit  子元素的排列顺序
            正常          反向          继承
  box-align：start | end | center   子元素的对齐方式
            靠左   靠右   居中
  box-pack：start | end | center   子元素的对齐方式
    顶部   底部   居中

2).box-flex：number ;  子元素如何分配剩余空间
   box-flex：在默认情况下，盒子并不具有弹性。如果对box-flex的属性值进行了设置，则变得富有弹性
   html,body{height:100%;margin:0px;}需要添加高度控制，否则无法撑满整个屏幕

3).属性
  box-ordinal-group：number ;  子元素显示顺序（在子元素设置）
  display : box ; 将一个元素的子元素以弹性布局进行布局
  box-orient：子元素的排列方式（横向或者竖向
  box-direction：子元素的排列顺序
  box-align：子元素的对齐方式
  box-pack：子元素的对齐方式

  box-flex：子元素如何分配剩余空间（在子元素设置）

三、响应式布局。
* 1、优势与不足
  1).优势
        多终端视觉和操作体验风格统一
兼容当前及未来新设备
节约了开发成本，维护成本也降低很多
  2).不足
兼容性：低版本浏览器兼容性有问题
移动带宽流量：相比较手机定制网站，流量稍大，但比较加载一个完整pc端网站显然是小得多
代码累赘，会出现隐藏无用的元素，加载时间加长

在设计的初期就要考虑的页面如何在多终端显示，兼容各种设备工作量大

* 2、响应式实现方式
  1).css3-media Query(媒体查询、媒介查询)
    1、定义和使用
    使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
    @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置响应式设计的页面，@media 是非常有用的。
    当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

    2、css语法
    1).内嵌样式的语法：
@media mediatype and|not|only (media feature) { ... }
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature

示例：


    2).外联css语法：
    
媒体类型：mediatype
关键字：and|not|only
媒体特征：media feature

示例：

    3).
1、媒体类型：mediatype
    all     用于所有设备
    screen    用于电脑屏幕，平板电脑，智能手机等
    print     用于打印机和打印预览
    speech   应用于屏幕阅读器等发声设备
    aural     用于语音和声音合成器
    braille     应用于盲文触摸式反馈设备
    embossed 用于打印的盲人印刷设备
    handheld 用于掌上设备或更小的装置，如PDA和小型电话
    projection 用于投影设备
    tty 用于固定的字符网格，如电报和对字符有限制的便携设备
    tv 用于电视和网络电视


2、关键字：and|not|only
    and   用来连接条件，然后括号里就是一个媒体特征查询语句
    not   用来排除某种媒体类型，即用于排除符合表达式的设备
    only   用来限定某种媒体类型，可用来排除不支持媒体查询的浏览器

    示例：
@media screen and (min-width: 500px) and (max-width : 800px)
 

 3、媒体特征：media feature
    max-width:500px
    min-width:500px
    @media screen and (min-width: 320px) and (max-width : 500px)

         4、分辨率精细的终端查询：device-pixel-ratio
    如：iphone4以上的retina屏的像素比是2
    @media only screen and (min-device-pixel-ratio: 2) 
2).JavaScript
3).第三方开源框架 Bootstrap