兼容ie8及现代浏览器的多种方案实现自适应布局

• • 1.flex布局

• 2.正padding+absolute布局实现右边压缩，左边不可压缩，兼容ie8

• • 3.负margin+absolute实现左右两边都压缩,兼容ie8

• 4.onresize事件

一、响应式布局

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

（一）、介绍

---

响应式布局是一种兼容pc、移动端等多种终端的样式布局。即根据屏幕的大小自适应布局，或者变化布局样式，（屏幕在拉伸时显示不同的效果比如一行布局变多行布局）。

（二）、响应式布局技术

---

1. viewport技术

viewport是pc端和移动端公用一套代码的重要神器。常遇到如下代码：

<meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no”">

viewport的属性如下：

| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |

| — | — |

| initial-scale | 设置页面的初始缩放值 |

| minimum-scale | 允许用户的最小缩放值 |

| maximum-scale | 允许用户的最大缩放值 |

| user-scalable | 是否允许用户进行缩放 |

| height | 设置layout viewport 的高度 |

另，利用rem单位可以实现各终端显示大小的问题。可以参考这个文章

2.@media媒体查询

@media 可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

案例：实现小屏1024px和大屏1600px之间时div用middleClass四列布局

@media screen and (min-width:600px) and (max-width:900px){

.contariner.middleClass {

float:left;

width:25%

}

媒体类型

| 值 | 描述 |

| — | — |

| all | 用于所有设备 |

| aural | 已废弃。用于语音和声音合成器 |

| braille | 已废弃。 应用于盲文触摸式反馈设备 |

| embossed | 已废弃。 用于打印的盲人印刷设备 |

| handheld | 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话 |

| print | 用于打印机和打印预览 |

| projection | 已废弃。 用于投影设备 |

| screen | 用于电脑屏幕，平板电脑，智能手机等。 |

| speech | 应用于屏幕阅读器等发声设备 |

| tty | 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备 |

| tv | 已废弃。 用于电视和网络电视 |

媒体功能

| 值 | 描述 |

| — | — |

| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |

| color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |

| color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |

| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |

| device-height | 定义输出设备的屏幕可见高度。 |

| device-width | 定义输出设备的屏幕可见宽度。 |

| grid | 用来查询输出设备是否使用栅格或点阵。 |

| height | 定义输出设备中的页面可见区域高度。 |

| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |

| max-color | 定义输出设备每一组彩色原件的最大个数。 |

| max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |

| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |

| max-device-height | 定义输出设备的屏幕可见的最大高度。 |

| max-device-width | 定义输出设备的屏幕最大可见宽度。 |

| max-height | 定义输出设备中的页面最大可见区域高度。 |

| max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |

| max-resolution | 定义设备的最大分辨率。 |

| max-width | 定义输出设备中的页面最大可见区域宽度。 |

| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |

| min-color | 定义输出设备每一组彩色原件的最小个数。 |

| min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |

| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |

| min-device-width | 定义输出设备的屏幕最小可见宽度。 |

| min-device-height | 定义输出设备的屏幕的最小可见高度。 |

| min-height | 定义输出设备中的页面最小可见区域高度。 |

| min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |

| min-resolution | 定义设备的最小分辨率。 |

| min-width | 定义输出设备中的页面最小可见区域宽度。 |

| monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |

| orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |

| resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |

| scan | 定义电视类设备的扫描工序。 |

| width | 定义输出设备中的页面可见区域宽度。 |

二、自适应布局

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

（一）、描述

---

自适应布局即使用固定分割点来进行布局。元素的宽度可以随着屏幕大小的改变可以自动伸缩或者拉伸，使其效果满足最小屏幕的布局样式和最大屏幕的样式。例如在工作中遇到小屏div压缩宽度文字不折行显示三点，大屏可以显示全部；多行布局时两边元素固定，中间元素可以自适应屏幕的宽度；两行布局，右边随这个文章内容变宽，达最大宽折行，左边全屏铺满…这种可以随着屏幕拉伸压缩的布局可称自适应布局。

（二）实现技术

---

1.flex布局

flex弹性布局，是自适应布局的一大神器，大多数现代预览器都支持，如下：

ie6-9及opera10-11.5不支持，如要考虑这些版本的预览器兼容性请绕路。

flex容器属性：

父类容器属性

| flex-direction | row | row-reverse | column | column-reverse; |

| — | — |

| flex-direction | row | row-reverse | column | column-reverse; |

| flex-wrap | nowrap | wrap | wrap-reverse; |

| flex-flow | |

| align-items | stretch | center | flex-start | flex-end | baseline; |

子类元素属性

| order | ; 用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。 |

| — | — |

| flex-grow | ; 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 |

| flex-shrink | ; 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。 |

| flex-basis | | auto; 个长度单位或者一个百分比，规定元素的初始长度。 |

| flex | flex-grow flex-shrink flex-basis 缩写 auto | initial | inherit; |

| align-self | auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; |

三列自适应布局代码如下：

flex 单行自适应布局

1

2

3

具体详细可以阅览这个文章

2.正padding+absolute布局实现右边压缩，左边不可压缩，兼容ie8

实现左右元素固定宽度，中间区域可以随着屏幕的改变而改变。或者实现更多的列可以自适应，某些元素固定，可以利用百分比长度，以及padding内边距和绝对定位实现，多列时也用50%和50%等多个百分长度自适应，注意父级元素的长度是固定的，不是脱离文档流的元素。

两个百分的元素并排布局可以模拟两边都压缩的效果。注意铺满div子元素宽的总和为百分之百