在以往固定宽度的布局中，在不同的分辨率的电脑上会显示差异较大，以至于出现各种bug。为了解决这个问题，可以使用流式布局或者弹性布局来代替固定宽度的布局
流式布局
流式布局能够相对于浏览器窗口进行伸缩，随着浏览器窗口变大，列也会变宽。流式布局可以非常高效的使用空间。但是流式布局再窗口过小的时候行会很窄，很难阅读。因此有必要添加以像素或em为单位的min-width来防止布局变得太窄，同时如果min-width设置的过大也会遇到和固定布局一样的问题
<div class="content">
<div class="primary">
<div class="primary">
your primary primary content goes here
</div>
<div class="secondary">
your secondary primary content goes here
</div>
</div>
<div class="secondary">
navigation and secondary content goes here
</div>
</div>
.content .primary{
width: 72.82%;
float: right;
display: inline;
height: 300px;
}
.content .secondary{
width: 25%;
float: left;
display: inline;
background: lightgreen;
height: 300px;
}
.content .primary .primary{
width: 59.7%;
float: left;
display: inline;
background: rosybrown;
height: 300px;
}
.content .primary .secondary {
width: 34.33%;
padding-right: 2.63%;
float: right;
display: inline;
background: saddlebrown;
height: 300px;
}
.content {
overflow: hidden;
background: lightsalmon;
height: 200px;
width: 76.8%;
margin:0 auto;
text-align: center;
max-width: 125em;
min-width: 62em;
}
image.png
如图页面再进行放大缩小是不会显示异常 在分辨率不同的屏幕上阅读的都很舒服。因为这个布局会恰当的伸缩，所以不需要添加max-width属性。但是，为了确保文本行的长度能够适合阅读，最好添加以em为单位的max-width。对于比较小的窗口尺寸，这个布局会有点挤，所以还添加以em为单位的min-width。
弹性布局
弹性布局以em为单位来设置宽度，可以确保在字号增加时整个布局随之扩大。弹性布局在文本字号增加时整个布局会加大，所以弹性布局会变得比浏览器窗口宽，出现水平滚动条。为了防止这种情况，我们需要在容器div上添加100%的max-width。
创建弹性布局比创建流式布局容易的多，技巧是设置基字号，使1em=10px。
大多数浏览器默认字号是16px，10px是16px的62.5%，所以：
body{
font-size: 62.5%;
text-align: center;
}
建议内部宽度仍然使用百分数，只以em为单位设置容器的宽度。这样的话，内部宽度仍然是相对于字号的。这样就可以方便的修改布局的总尺寸，不必修改每个元素的宽度，这种解决方案更加灵活，更容易维护。
<body>
<div class="content">
<div class="primary">
<div class="primary">
your primary primary content goes here
</div>
<div class="secondary">
your secondary primary content goes here
</div>
</div>
<div class="secondary">
navigation and secondary content goes here
</div>
</div>
</body>
<style>
body{
font-size: 62.5%;
}
.content .primary {
width: 72.82%;
float: right;
display: inline;
height: 300px;
}
.content .secondary {
width: 25%;
float: left;
display: inline;
background: lightgreen;
height: 300px;
}
.content .primary .primary {
width: 59.7%;
float: left;
display: inline;
background: rosybrown;
height: 300px;
}
.content .primary .secondary {
width: 34.33%;
padding-right: 2.63%;
float: right;
display: inline;
background: saddlebrown;
height: 300px;
}
.content {
overflow: hidden;
background: lightsalmon;
height: 400px;
width: 92em;
margin: 0 auto;
text-align: center;
max-width: 95%;
min-width: 60%;
}
</style>
在使用常规文本字号时，这些代码产生的布局与固定宽度布局看起来一样，但是它会随着文本字号的增加而漂亮的增大。
