有些时候，在网站建设时使用流动网页设计确实有很多好处，但也只是在正确使用的时候这些技巧才会让网页在屏幕大小不同以及移动终端上有良好的表现，而糟糕的代码结构，对流动布局来说是非常不利的。所以，网站建设者需要针对流动设计的弊端探索可行的解决方法。

　　在这篇文章中，凡科建站将会介绍怎么创造百分百自适应屏幕分辨率css布局的有效方法。

　　首先，使用网格流动布局。大部分的建站者都会听过设计固定宽度的960网格系统，通过960网格系统的宽度设计要比流动布局更加可取。但是，还有另外的方法可以搭建一个以网格为基础的弹性布局，从技术角度看，弹性布局的代码有别于流动布局，可是它可以给用户提供基本上相同的效果。

　　是什么流动布局呢？流动网格是指通过智能使用div、数学计算以及百分比来创建的。这种布局的理念源于Ethan Marcotte，其理念主要利用相对尺寸、结合百分比以及em，通过简单的分割寻找到相对应的宽度，而这个宽度会应用在固定宽度设计中。

　　流动布局的优点是：它可以让你的网站拥有一个网格布局，而且只需要固定一次宽度；用户能够通过预设的字体大小查看布局，而且保持它的比例大小；流动布局还能跨浏览器兼容，而且一旦出现问题也将非常容易修复。

　　搭建流动布局的第一步是创建首选固定宽度的模拟，这样网站建设者就能够看到它的比例，然后就可以使用比例、平衡、间距等技巧。

　　从这个简单的布局中，我们可以得出960px是固定的宽度，对于所有小于这个分辨率的屏幕，我们需要水平滚动条出现，而内容在一个880px的wrapper中，两侧有40px的margin，元素之间有20px的间距。