几种布局方式的总结

   准备面试题，突然发现自己好像对布局这块仍然有点不清楚，写篇文章记录一下。 

先附上一个网站：加深理解

  http://wow.techbrood.com/fiddle/1753

一、静态布局

  静态布局就是传统网页的布局方式，所有的样式都统一用px来定义宽和高。也可以设置min-width和min-height，当小于这个宽高的时候就会显示滚动条，当大于这个宽高时，内容就居中对齐。

  特点：没有兼容性问题

二、流式布局

  流式布局就是随着屏幕的改变，页面布局没有很大的改变，但元素的大小会发生改变。

  实现：通过给浏览器主要内容区域高度用px；宽度设置%，配合min-width/max-width，防止屏幕过大过小影响元素正常显示。

  另外，流式布局一般会在head标签里加

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
/* device-width为屏幕的输出宽度 */

三、自适应布局

  自适应布局就是随着屏幕的改变，页面里元素的位置（布局）发生改变，大小不变；为不同的屏幕设置布局样式，当屏幕大小发生改变时，布局也会发生改变。可以看成是不同屏幕下由多个静态页面组成的。

  实现：media-query 媒体查询，尽量多的使用相对单位长度（%,em,rem）

四、响应式布局

  确保一个页面在不同的终端上都能呈现最好的效果，每一个屏幕分辨率下都有一个布局样式，即随着屏幕的改变，元素的大小和位置都会发生改变。

  实现：meta标签加midia-query

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

五、自适应布局和响应式布局的区别

  1、自适应布局需要开发出好几套页面，而响应式开发出一套就可以了

  2、自适应布局一般有一个范围，比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

 3、自适应屏幕过大过小，元素的显示都会很奇怪，响应式就可以解决这个问题，它可以自动识别屏幕并对元素的大小做出相应的调整。