HTML+CSS各类布局模式介绍

======================================================================================

即传统 Web 设计，网页上的所有元素的尺寸一律使用 px 作为单位。

• 布局特点

• 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

• 常规的 pc 的网站都是静态**（定宽度）布局的，也就是设置了 min-width**，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与 pc 端。

• 设计方法

• PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个 Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

• 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如 wap.或 m.。

移动端开发中采用静态布局的两种方式

• 在viewport meta标签上设置 width=320，页面的各个元素也采用 px 作为单位。通过用JS 动态修改标签的 initial-scale 使得页面等比缩放。

• 设在viewport meta标签上设置content="width=640,user-scalable=no“，页面的各个元素也采用 px作为单位。由于 640px 超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

优点：这种布局方式对设计师和 CSS 编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

当前，大部分门户网站、大部分企业的 PC 宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

流式布局（Liquid Layout）

=========================================================================&