现在是时候讨论存在哪些类型的布局，以及分析它们的细节和优势了（我们将在文章的相关部分更详细地讨论 SEO 和自适应选项）。
固定的
如今这是一个相当流行的解决方案。
此类网站布局在不同设备上的外观如下：
固定布局
此选项的主要特点是绝对所有互联网资源的块和页面都具有严格固定的高度和宽度，并且不依赖于屏幕尺寸。
优点：
在所有屏幕上均相同且正确地显示网络资源，无论其尺寸如何；
实施起来简单（因此成本更优惠）。
表壳：VT-metall
了解我们如何为莫斯科一家金属加工公司 将招聘成本降低 13 倍
了解方法
缺点：
缩放电子页面会导致其扩大并 哈萨克斯坦号码数据 超出屏幕的宽度和高度；
在宽屏上显示时，侧面有空白（特别是页面较窄时 - 不超过 900 像素）；
在小屏幕上，网站会被缩放，即，它是网站的缩小版。因此，要阅读信息，您需要放大页面。而且由于如今大量用户通过移动设备访问互联网，这种解决方案并不是最好的。
通常，使用固定网站布局来创建登录页面。
可拉伸（橡胶）
此类布局在不同屏幕上的显示方式如下：
橡胶布局
“流动”网页的特点是，开发人员以百分比（而不是像素）设置网页上所有视觉元素的大小。因此，在对角线不同的屏幕上，同一个块会有不同的大小，甚至显示略有不同。
优点：
自动调整至页面大小；
在任何显示器上看起来都很棒。
缺点：
在移动设备上查看时，页面的某些视觉元素被过度压缩，以致于变得非常难以使用。通常这发生在反馈表和菜单中；
由于屏幕宽度上的块的压缩和拉伸，某些元素在智能手机和平板电脑上可能看起来不太好看；
更难实施（因此也更昂贵）。
流体布局最适合用于开发将所有视觉元素放在一列中的页面，或与固定布局结合使用的页面。
自适应
目前，这是最常见的布局类型。有了它，您可以创建最“实时”的互联网资源，重建其视觉元素并根据所使用的设备类型改变其大小。
显示此类网站布局的示例：
自适应布局
自适应解决方案的基础是橡胶布局与媒体查询或特殊脚本的结合，使您能够确定显示器的尺寸，并根据它们为视觉元素（颜色、图像和字体大小、块位置、元素宽度）分配适当的样式。
优点：
通过在缩放网页时重组视觉元素，其显示效果不会变差；
无需放大，方便在移动设备上查看；
由于自动调整屏幕尺寸，页面可以在任何类型的设备上完美显示。
也讀吧！
“网站开发：方法、工具和问题”
阅读更多
缺点：
需要使用不同的屏幕尺寸（缩放、在线服务、减小/增大浏览器窗口）测试自适应网站，导致在工作质量控制上花费大量时间（项目越大，开发所需的时间就越长）；
这是一个相当耗费劳动力的过程（而且这直接影响成本）。
一些现代开发人员也使用网站的块和表格布局，但这是另一篇文章的主题。
通常来说，在上述所有创建网页的方法中，选择哪种方法是显而易见的。每天都有越来越多的用户通过平板电脑和智能手机浏览网站。因此，自适应互联网资源能够自动调整以适应当今使用的设备参数，具有不可否认的优势。