【黑马程序员西安中心】 css布局

一、静态布局（static layout）

　　居中布局，所有样式使用绝对宽度/高度(px)，当屏幕大小改变时，页面布局不会发生变化。

       优点：布局方式是最简单的，且没有兼容性问题。

        缺点：不能根据用户的屏幕尺寸做出不同的表现。

二、流式布局（Liquid Layout）

        使用%百分比定义宽度，高度大都是用px来固定住。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

        缺点：如果屏幕尺度跨度太大，显示非常不协调。

三、自适应布局

　　自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

缺点 ：需要写多个页面

四、响应式布局（Responsive Layout）

　　页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

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

缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

五、弹性布局（rem/em布局）

    1. rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。

    2. 使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。

    3. 这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。

    4. 浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

    5. 用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }。

    6. 使用rem单位的弹性布局在移动端也很受欢迎。

    7. 其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。

结论

    1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

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

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