最近在做一個自適應布局的項目，所以學了下自適應，下面是總結。此總結只做效果，不關注效率和代碼優化。
1.css3
html中添加
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
//感覺很多人寫的不一樣，具體意思還不是很了解，感覺影響不大，不會寫可以去各大牛逼網站去查看源代碼拷貝
css中的整體布局
@media screen and (min-width: 0px) } @media screen and (min-width: 768px){} @media screen and (min-width: 1200px) {}
公共css
2.整體思路。
0-768px,顯示移動端的效果。width:100%,自適應屏幕寬度。
768-1200px;顯示pc端效果，包括ipad。屏幕寬度為固定1200px;
>1200px;顯示pc端效果，屏幕主體寬度為1200px,居中顯示，兩邊banner背景以漸變延伸。
3.banner自適應
pc端banner分三層，
一層為1200px，banner內的標題文字，小圖片等內容放在這個div中。
第二層為width:100%,居中顯示，banner圖帶有一定透明度，設為這一層的背景圖,背景圖居中，不重復。當屏幕超過1200px兩邊背景會無限延伸，直到達到最大。
第三層也為width:100%,拉一條漸變做背景 background-size:100% 100%,當屏幕超過第二層背景圖片時，漸變無限延伸，切配合第二層作為banner圖主體圖片（第二層是半透明的）。
4.兩端對齊
<div class="welcome1" style="text-align:justify;text-align-last:justify;padding:0 34px;">
text-align:justify;text-align-last:justify;如今適用於大多數的瀏覽器，但是一些比較原生的瀏覽器會沒有效果。聽說是因為最后一行沒有兩端對齊效果，如一段文字的最后一行沒有必要兩端對齊。所以可以采用如下方式：
.welcome1:after{ display:inline-block; content:''; width:100%; height:0; overflow:hidden; }
：after 偽類 在指定元素之后添加內容。
content:'' 表示要添加的內容。
width：100%。添加一行的寬度。
height:0 這一行的高度為0；
overflow:這一行不會被撐大，height:0;
5.兼容ie8
ie8不支持 @media 等標簽，所以要下一個js。
應用js http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js 或者 respond.js（我用的是前者，但是感覺后者用的人多，以后試一下再更新這里）
說明：這個不能用，因為用的是谷歌的東西。另外找一個鏈接吧，我是翻出去，下載到本地的，沒找到其他鏈接。
ps:不僅僅是自適應，很多牛逼的，好用的css屬性都不兼容ie8，比如第4條。ie8兼容性個人覺得是web前端必備技能。
6.手機瀏覽器不兼容html5 和css3的某些屬性
手機不支持vw尺寸格式。
寬度用百分比自適應。
高度用js操作，js的缺點是只有加載的時候有效，在pc端拉大縮小不起作用，所以可以在Pc端保留vw尺寸，手機端不存在拉升問題，可以在加載的時候用js算出高度，然后操作css屬性。
7.先搭建上下結構的框架。
自適應布局包含很多position:absolute,如過沒有一個整體的div包含，會出很多兼容性和浮動問題。
8、手機瀏覽器兼容大部分新的技術，但是瀏覽器IE8很多不兼容。
IE8不兼容<section></section>標簽，慎用。
IE8不兼容JQ trim()方法。
IE8不兼容JSON.Parse()和Json.stringify()。