布局类型

一块放了盐的面包会变咸；一片面包加了糖。同样一片面包，仅仅因为调料不同，就会有不同的味道。同样，同样的设计稿，用不同的页面布局做出来，你会得到完全不同的页面风格！

这里说的网页布局，并不是全屏布局类型，中央排列类型等。那百度一搜就出来了。这些都偏向于设计师的角度。毕竟，一个设计师可以一天用一个不同的样本设计一个网页布局！没有太大的讨论意义！

各种网页排版

但是，无论是什么样的网页设计和布局，我们都要面对一个问题：面对不同的设备大小，如何处理网页。

接下来，网页的布局偏向程序员的角度，主要解决网页和设备尺寸的匹配关系。

静态布局这种布局也叫‘固定布局’，是最原始的一种网页布局。任何一个刚接触前端的人都是这样做网页的。

这种布局最大的特点是网页宽度固定，通常以px为单位，这在pc端网页中很常见。很多新闻资讯网站都采用这种布局类型。

像一个360导航页面，中间正文内容是固定宽度的。

这种布局具有很强的稳定性和可控性，不存在兼容性问题，但无法根据用户的屏幕大小做出不同的表现。即如果用户的屏幕分辨率小于这个宽度，就会出现滚动条；如果大于这个宽度，就会留下空白。

自适应布局随着计算机屏幕而增长。以24寸、27寸电脑屏幕为主流，网页静态布局很难看。因为如果网页是以14寸电脑屏幕大小为基准，大屏会显示一点内容。

如果同一个网页基于27英寸的电脑屏幕，13英寸的笔记本浏览这个网页，就会出现滚动条。

显然，需要一种能够适应不同尺寸和宽度，并且能够以相等的比例缩放尺寸的布局。此布局是自适应布局。

从头到尾都是屏幕覆盖。

这种自适应布局的优势很明显，可以适应大部分显示器的不同尺寸，还可以随着浏览器窗口的调整进行动态调整，体验效果又上了一个台阶。

当然代码量和难度肯定比静态布局多。要实现这种布局，不仅要依靠px固定单位，还要结合% percentage、rem等动态单位。

响应式布局iPhone4问世以来，手机、平板等移动设备的使用越来越频繁，这意味着网页也要适应移动设备。

自适应布局确实可以解决适应不同尺寸的问题，但是有一个限制，就是只适用于电脑，比如14寸的笔记本，5寸的手机。当同时显示自适应布局网页时，你会发现手机里的网页太小，无法浏览。

自适应布局的本质是网页根据屏幕的大小进行缩放。显然手机等小尺寸屏幕根本不适合，更何况现在的智能手表！

面对这种情况，一个网页有多种风格是很有必要的，不同的风格要根据屏幕的大小来切换。

就像换了张脸，但还是同一个网页。

在实际开发中，adaptive和responsive经常一起使用，两者并不冲突。比如根据屏幕宽度，定制手机风格和电脑风格(响应式)。无论是哪种风格，都需要做适应性处理，进一步提升体验。

毫无疑问，这样的布局是最完美的，但是工作量很大，需要借助第三方ui框架开发，比如bootstrap等等。

近年来，瀑布流布局的审美不断丰富。比如瀑布流布局出现，里面的元素会像水一样充满每一个地方。这种布局很受女性购物网站的欢迎，蘑菇街就是这样的设置。

女人很喜欢这种风格。

总结实际开发，往往是各种布局的组合，各有各的优势，才能达到极致的前端体验！