最近在做乙個自適應布局的專案，所以學了下自適應，下面是總結。此總結只做效果，不關注效率和**優化。
html中新增
"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.兩端對齊
class="welcome1
" style="
text-align:justify;text-align-last:justify;padding:0 34px;
">
text-align:justify;text-align-last:justify;如今適用於大多數的瀏覽器，但是一些比較原生的瀏覽器會沒有效果。聽說是因為最後一行沒有兩端對齊效果，如一段文字的最後一行沒有必要兩端對齊。所以可以採用如下方式：
.welcome1:after
：after 偽類 在指定元素之後新增內容。
content:'' 表示要新增的內容。
width：100%。新增一行的寬度。
height:0 這一行的高度為0；
overflow:這一行不會被撐大，height:0;
5.相容ie8
ie8不支援 @media 等標籤，所以要下乙個js。
應用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不相容標籤，慎用。
ie8不相容jq trim()方法。
ie8不相容json.parse()和json.stringify()。
CSS自適應布局思路
最近在做乙個自適應布局的專案，所以學了下自適應，下面是總結。此總結只做效果，不關注效率和 優化。1.css3 html中新增 複製 如下 minimum scale 1.0,maximum scale 1.0,user scalable no css中的整體布局 cs code複製內容到剪貼簿 一般...
自適應布局
請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...
CSS布局 自適應布局
網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...