响应式的布局

响应式 流体布局

John Allsopp A Dao of Web Design

一、布局的选项

1、固定布局

最为常见的实现方式。优点是对于页面拥有跟多的控制权。大屏幕的则会留很多空白，对于小的屏幕就会出现滚动条

2、流体布局

采用百分比，是页面具有可变的特性，可避免出现的大片留白。但是有些文本的行款在大屏幕上看起来太宽，小屏幕上有太窄。

3、弹性布局

与流体布局类似，但是采用em作为单位，em为当前字体的大小。除了跟流体布局类似的优点外，用户增大或减少字体，使用弹性布局的元素的宽度也会等比例变化。也会出现水平滚动栏。

4、混合布局

几种布局的集合。

二、字体大小

1、像素

无需考虑级联(父元素的字体大小对于子元素没有影响)，但是对于维护来说，当你想要改变所有字体的大小时，你得修改所有的（sass改变了这种现状，因为sass拥有变量）

2、em

是级联的，但是上下文环境如果变了，基准也会随之而改变。

3、百分比

与em差不多，只有处于em直接与文本大小相关的考虑时，使用em才更有意义。
在IE中IE会夸大实际应当调整的字体大小，可以设置

body{
    font-size:100%;
}

这样就不会有夸大的问题了。

4、rem

rem与em的区别在与rem的大小与根元素——HTML元素有关，能够避免发生在嵌套元素中的级联问题
兼容性可以看这个兼容性；更多的介绍可以看响应式十日谈第一日：使用 rem 设置文字大小.可以使用sass进行自计算，为了考虑兼容性，可以使用下列代码

span{
    font-size:16px;
    font-size:1rem;
}

如果在没有css预处理工具之前，rem由于考虑兼容性还是要修改所有的像素，但是由于类似sass之类的工具，这个问题就不会增加太多的成本，所以我们可以大胆的使用rem这个单位，但是并不是所有的样式都是适用rem。

三、网格布局

《“Ordering Disorder:Grid Principles for Web Design”》,网格布局

1、从内容出发

根据你的内容去设置你的网格。

2、设置网格

a、box-sizing css的默认的盒模型存在：padding和border会加宽width

.box{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

box-sizing只有IE8之前的浏览器缺乏支持。

四、混合固定宽度和流动宽度

1、表格布局
简化了将站点布局为多列的实现过程，可以混合使用固定宽度和流动宽度。
关于display:table 的问题
a、在一个display:table-cell的元素中，你无法精确地定位元素，如果需要精确定位需要在表格中插入另外一个div。
b、表格是更加严格的，有时浮动所具有的流动性是有利的。
css网格布局和Flexbox是新的两种布局方法。