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

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

  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、自适应屏幕过大过小,元素的显示都会很奇怪,响应式就可以解决这个问题,它可以自动识别屏幕并对元素的大小做出相应的调整。