自适应设计与响应式设计
目前非常流行自適應設計與響應式設計，而且經常讓人混淆，自適應設計不應與自適應布局混為一談，它們是完全不一樣的概念。
在這先說明下這兩者的異同：
自從移動終端飛速發展以來，各種各樣的機型突飛猛進，很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone/iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的復雜度。
于是，很早就有人設想，能不能"一次設計，普遍適用"，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局（layout）？
2010年，Ethan?Marcotte提出了"自適應網頁設計"（Responsive?Web?Design）這個名詞，指可以自動識別屏幕寬度、并做出相應調整的網頁設計。
?
圖片來源http://mashable.com/2012/12/11/responsive-web-design/
如圖所示就叫做自適應布局。自適應布局有它的使用價值，在于它能夠提供一種更加實用的解決方案，使得項目的實現成本更低，并且更加易于測試。一個自適應布局可以被看作是響應式布局的一個更加廉價的替代品，會在項目資源緊缺的情況下更具有吸引力。
而在響應式布局中你卻要考慮上百種不同的狀態:
響應式網頁設計是自適應網頁設計的子集。響應式網頁設計指的是頁面的布局（流動網格、靈活的圖像及媒介查詢）。總體目標就是去解決設備多樣化問題。
響應式布局等于流動網格布局，而自適應布局等于使用固定分割點來進行布局。
當固定寬度與流動寬度結合起來時，自適應布局就是一種響應式設計，而不僅僅是它的一種替代方法。?
那么如何進行響應式布局呢？下面就一步步為你揭開響應式布局的面紗：
Skill 1?學會運用?Css3?Media?Queries，根據不同的屏幕分辨率，選擇應用不同的Css規則
Media?Queries語法簡介：
max-width：若瀏覽區域的寬度小于400像素，則下方的CSS描述就會立即被套用：
| 12345 | @media screen and (max-width:400px){ ????.class??{???????? background:#ccc; ???? } } |
也可以把要套用的描述獨立成外部檔案：
| 1 | <link rel="stylesheet" media="screen and (max-width: 400px)" href="mini.css" /> |
Min?Width：若瀏覽區域的寬度大于800像素，則下方的CSS描述就會立即被套用：
| 123456 | @media screen and (min-width:800px){??.class??{????background:#666;??}} |
Device?Width：若瀏覽設備的可視范圍最大為480px，則下方的CSS描述就會立即被套用：(注：移動手機目前常見最大寬度為480px，如iPhone?or?Android?Phone)
| 123456 | @media screen and (max-device-width:480px){??.class??{????background:#000;??}} |
針對iPhone4提供專用的css設定檔：
| 1 | <link rel= "stylesheet"??media= "only screen and (-webkit-min-device-pixel-ratio: 2)"??type= "text/css"??href= "iphone4.css"??/> |
針對iPad的Portrait?Mode(直立)與Landscape?Mode(橫躺)兩種瀏覽模式給予不同的css設定檔：
| 123 | <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> |
Skill?2?在網頁頭部加上viewport標簽
| 1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
瀏覽器推出了“viewport?meta”標簽，許多移動瀏覽器現在都支持這個標簽，W3C?協議定義?viewport?meta?目前還屬于草案，很多人都會在html?head?處加上?viewport?這個meta?data，一個典型的移動端viewport如下所示：
| 1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
該屬性可以控制視窗口寬度的大小。它可以被設置為實際的具體像素width=?600或為特殊設備設置寬度值。
viewport設置屬性如下：
width：可設定數值，或者指定為?device-width
height：可設定數值，或者指定為?device-height
initial-scale：第一次進入頁面的初始比例
minimum-scale：允許縮小最小比例
maximum-scale：允許放大最大比例
user-scalable：允許使用者縮放，1?or?0?(yes?or?no)
編譯過程會轉化成如下的語義：
| 1234567 | @viewport {????width: device-width;????initial-scale: 1.0} |
device-width?，主要是為了讓整個頁面寬度與手機可視寬度相同，這樣就可以簡單相容于不同機型屏幕大小，如果這邊width沒有設定的話，就會依照html/css給予的width當作預設值。
因為解析度不同，device-width有時候不一定是view?width，所以在類似iphone?4高解析度機器上，device-width=320?，可是實際解析度為480，這時候就需要利用javascript針對UA下去做動態調整。
user-scalable，這個屬性可以讓使用者能否放大、縮小頁面，如果頁面不允許手機使用者縮放，就直接設定0或者no，反之要啟動縮放功能，就設置1或者是yes。
接下來將說明幾種常用的方式，以及具體例子提供給大家參考。
如果在手機端我們希望網頁呈現固定，不希望使用者隨意縮放，直接設定如下
| 1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
如果希望在不同device使用不同縮放大小，就必須使用javascript，檢測UA(User?agent)，動態設定viewport，如下：
| 12 | viewport = document.querySelector("meta[name=viewport]");viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'); |
Skill?3 不使用絕對寬度
由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度（margin-left:5px）的布局，也不能使用具有絕對寬度(例如：width：200px)的元素,而最好使用百分比寬度width:20%;或者with:auto;
Skill?4 字體最好不要用絕對大小(px)，而使用相對大小(em)
| 1 | body { font: normal 100% Helvetica, Arial, sans-serif; } |
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
| 1 | h1 { font-size: 1.5em; }?? |
h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）
| 1 | .small { font-size: 0.875em; } |
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）
?這里順便說說?px??pt?em ?rem區別：
px是pixel，像素，是屏幕上顯示數據的最基本的點，在HTML中，默認的單位就是px；
pt是point，是印刷行業常用單位，等于1/72英寸。
em才是真正的“相對單位”（百分比嘛，當然是相對），而px和pt都是絕對單位（都有固定值）。所以，一般移動終端布局用em比較合適。
rem是css3的出現，同時引進新的單位,而rem是相對于根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值，在根元素中設置多大的字體，這完全可以根據您自己的需要。
Skill?5?流動布局（fluid?grid）
流動布局的含義是各個位置都是浮動的，不是固定不變的
| 123 | .main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } |
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
Skill?6 圖片的自動縮放，等比縮放
| 12345 | img{????max-width: 100%; } |
要使圖片按等比縮放，一般不需要規定圖片高度。且最好不用background-image,因為這樣不會按照等比縮放。
最后請欣賞基于Media Queries的響應式布局優秀案例，請手機掃一掃：
??
上訴網頁你可以用瀏覽器和手機打開瀏覽。發現在PC和移動端顯示有很大變化。簡單說呢就針對不同的屏幕分辨率應用不同的CSS樣式。
轉載自AlloyTeam：http://www.alloyteam.com/2015/04/zi-shi-ying-she-ji-yu-xiang-ying-shi-wang-ye-she-ji-qian-tan/
轉載于:https://www.cnblogs.com/jill1231/p/5218264.html
總結
以上是生活随笔為你收集整理的自适应设计与响应式设计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Robotium双client測试框架
- 下一篇： 前端-html、css