响应式布局

1.定义：

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

2.方法

2.1 meta标签

在头文件中添加一个meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。

2.2 使用 rem

rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。

2.3 css的media query

外联css语法 实例： <link rel="stylesheet" media="screen and (min-width:1024px)" href="red.css" /> 内嵌

实例1： 当页面宽度小于等于960px执行下面的css

@ media screen and (max-width: 960px){ body {

实例2： 当页面宽度大于960px小于1200px执行下面的css

@ media screen and (max-(min-width:960px) and (max-width:1200px){ body{ background:yellow; }

注意：范围大的要放在上面，范围小的放在下面。假设有两个样式，一个适应 360px 以下，一个适应 640px 以下，如果 360px 的放在上面，但是小于 360px 同样满足小于 640px，这就不是我们想要的结果了，所以范围大的需要放在上面。

2.3图片的自适应

HTML img, object {max-width: 100%;}

这里声明max-width规则，就是要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）。此时，如果包含图片的元素（比如包含图片的body或div）比图片固有宽度小，图片会缩放占满最大可用空间。 2. JS

addLoadEvent(function() { 　　　　 var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); 　　 });