兼容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 | 允许用户的最小缩放值 |

| max