总结下自己常用的几种前端布局方式

页面布局是我们前端人的一项基本功，不知道小伙伴们平时都用什么布局方式呢？下面我来总结一下自己的常用布局方式。

固定布局(fixed layout)

固定布局，这种布局方式相对来讲是比较“直接粗暴”的，用这种方式布局，无关怎么改变浏览器的宽度，页面主体区域的宽度是固定不变了，里面的内容布局也是完全固定住的；比如：豆瓣网就采用了和这种布局方式。

优点：任意浏览器下的显示宽度都一样，那也意味着对于图像、表单、 视频等宽度固定的内容来说，潜在的冲突更少。不用设定min-width（最小宽度）和max-width（最大宽度），因为这两个属性并不被所有浏览器支持。即使网页被设计成兼容最小屏幕分辨率800×600的大小，在大分辨率显示器下，内容仍然足够易读。缺点因为固定布局适配主流屏幕大小，在高分辨率屏幕下可能会有巨 大的页面空白，可能会导致用户体验感不好。小屏幕上可能会出现水平滚动条，影响用户体验。可用性低，对用户浏览设备有局限性使用建议1024×768以及更高分辨率的屏幕选择960px作为网页内容主容器的像素宽度，这样还能有一点留白。而800×600分辨率下的主容器最佳显示宽度是760px，设置成这一宽度能够照顾到那10%，而较大屏幕上看起来也还不赖。固定宽度设计，务必保证主容器居中对齐，以保持平衡（一般利用margin: 0 auto;就可以了）。流体布局(fluid layout)

流体布局，也称为自适应布局布局，宽度使用了百分比宽度来适应不同屏幕分辨率，高度大都是用px来固定住。例如google analytics，当你改变浏览器的宽度，显示区域也会如同水流般自适应于显示器的宽度显示（浏览器宽度变一点，web页面宽度也跟着变一点），主体结构布局不变。开发中一般通过调整内容区块的宽度来适应，或调整空白区域大小来适应不同分辨率。

优点：流动网页布局拥有更强的亲和力，因为它能根据客户端的情况自适应。在不同浏览器和屏幕分辨率下的额外空白量都差不多，更符合视觉吸引力要求。如果设计得当，流动布局能避免在小屏幕上的水平滚动条。缺点设计师对客户端的显示效果更难以控制，由于他们使用特定大小的屏幕调试，也更不容易发现潜在问题。图片、视频以及其他拥有固定宽度的内容不得不被设置上不同宽度，以配合不同的屏幕分辨率。对于特别大的显示屏，内容不够多的话就会造成过量空白，破坏美感。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。使用技巧：采用简单设计：应用到流动网页布局的图案和复杂技巧越少，其建立和维护也就越容易。同时也能更方便地适应不同屏幕分辨率。min-width 和 max-width，可以用来为过大或过小屏幕的用户指定一个固定宽度。屏幕过小的时候网页布局一般为，内容区块固定成指定宽度，屏幕下方也出现一个水平滚动条；屏幕过大的时候，内容也固定到最大宽度，以免延展得太开，影响文字的可读性。弹性布局(elastic layout)

其要点就在于使用单位em或rem来定义元素宽度。em/rem则是相对于字体大小的单位宽度。它随着字体大小的变化而变化，反应用户对字体大小的设定。

优点：如果合理运用，这种布局设计能带来非常友好的用户界面。目标效果是所有东西都能根据用户的偏好增大或缩小尺寸。可以用于字体缩进text-indent；使用rem单位的弹性布局在移动端也很受欢迎；缺点：尽管第一条“利”说得没错，弹性布局还是为可用性埋下了很多地雷。得需要十分的聪明才智和不断测试才能让布局适合所有用户。这种布局比前述两种要难实现得多，可能那一小点的可用性并不值得你花这么多功夫。由于这种布局的特殊性，有些弹性布局设计可能需要额外的样式表，并针对IE6做些特别的调整 ；REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。使用技巧：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。浏览器的默认字体高度一般为16px，即1em=1rem=16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面根节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小网页布局一般为，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。响应布局(responsive layout)

随着宽屏的不断普及，CSS3出现了@media媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了百分比流式布局+rem弹性布局，再搭配媒体查询技术使用。响应式几乎已经成为优秀页面布局的标准。

响应布局是浏览器的宽度满足某一个条件的时候，web页面的布局发生变化。这种变化往往不仅仅是web页面宽度的变化，还有主体结构布局的改变。例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。如京东商城的首页。

@media (min-width: 768px){ //>=768的设备 }@media (min-width: 992px){ //>=992的设备 }

优点：

适应pc和移动端，如果足够耐心，效果完美

缺点：媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不同设备之间不同分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。使用技巧：

通常是糅合了百分比流式布局+rem弹性布局，再搭配媒体查询技术使用。——使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式，分别为不同的屏幕分辨率定义布局。同时，在每个布局中，主区域划分应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。

选择何种布局方式

选择何种布局应该由网站的性质决定。权衡上述利弊，根据你的网站需求找到合适的解决方案，如以下选择：

1、如果只实现pc端简单设计，那么静态固定布局（定宽度）是最好的选择。

2、如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；

3、一些特定的界面可以使用主区域流动+侧边栏固定+一些弹性应用 来很好的实现。

4、如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

原文链接：blog.csdn.net/zhouzuoluo/…**