如何進行自適應網頁設計?
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【如何進行自適應網頁設計? 】
大家好，我是IT修真院北京總院第24期的學員，一枚正直純潔善良的web程式設計師
今天給大家分享一下，修真院官網css任務3，深度思考中的知識點——如何進行自適應網頁設計?
1.背景介紹
現在人們通過手機瀏覽網頁佔了大多數，隨著瀏覽方式的改變，網頁實現多終端自適應，無論對於避免工程師無謂的重複勞動或者是專案管理的便捷性上來說重要性都是十分巨大的。
2.知識剖析
由於移動裝置越來越多的被人們使用，手機成為訪問網際網路的最常見終端，而我們設計的網頁確是為了呈現在PC端。
手機的螢幕比較小，寬度通常在600畫素以下，而PC的螢幕寬度，一般都在1000畫素以上（目前主流寬度是1366×768），有的還達到了2000畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。
很多網站的解決方法，是為不同的裝置提供不同的網頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的複雜度。
自適應是為了解決如何才能在不同大小的裝置上呈現同樣的網頁。
3.常見問題
如何進行自適應網頁設計
4.解決方案
1、在HTML頭部增加viewport標籤。
通俗的講，移動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分割槽域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在預設情況下，一般來講，移動裝置上的viewport都是要大於瀏覽器可視區域的，這是因為考慮到移動裝置的解析度相對於桌面電腦來說都比較小，所以為了能在移動裝置上正常顯示那些傳統的為桌面瀏覽器設計的網站移動裝置上的瀏覽器都會把自己預設的viewport設為980px或1024px（也可能是其它值，這個是由裝置自己決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個預設的viewport的寬度要小的。
該meta標籤的作用是讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放。也許允不允許使用者縮放不同的網站有不同的要求，但讓viewport的寬度等於裝置的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比螢幕寬的預設viewport，也就是說會出現橫向滾動條。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
把移動裝置上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動裝置的viewport，ideal viewport的寬度等於移動裝置的螢幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(單位用px)，那麼這個元素的寬度就是裝置螢幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在於，無論在何種解析度的螢幕下，那些針對ideal viewport 而設計的網站，不需要使用者手動縮放，也不需要出現橫向滾動條，都可以完美的呈現給使用者。
要得到ideal viewport就必須把預設的layout viewport的寬度設為移動裝置的螢幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設為width-device這個特殊的值就行了。
2、不使用絕對寬度
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的一個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是一個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動裝置上，必須弄明白這點。在早先的移動裝置中，螢幕畫素密度都比較低，如iphone3，它的解析度為320x480，在iphone3上，一個css畫素確實是等於一個螢幕物理畫素的。後來隨著技術的發展，移動裝置的螢幕畫素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，解析度提高了一倍，變成640x960，但螢幕尺寸卻沒變化，這就意味著同樣大小的螢幕上，畫素卻多了一倍，這時，一個css畫素是等於兩個物理畫素的。
3、流動佈局
流動佈局（fluid grid） "流動佈局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現。
4、MediaQuery模組
"自適應網頁設計"的核心，就是CSS3引入的MediaQuery模組。 它的意思就是，自動探測螢幕寬度，然後載入相應的CSS檔案。
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"
上面的程式碼意思是，如果螢幕寬度小於400畫素（max-device-width: 400px），就載入a.css檔案。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"
如果螢幕寬度在400畫素到600畫素之間，則載入b.css檔案。
5.編碼實戰
6.擴充套件思考
自適應與響應式的區別
自適應是為了解決如何才能在不同大小的裝置上呈現同樣的網頁，讓同一張網頁自動適應不同大小的螢幕，根據螢幕寬度，自動調整網頁內容大小。但是無論怎樣，他們主體的內容和佈局是沒有變的。
自適應還是暴露出一個問題，如果螢幕太小，即使網頁能夠根據螢幕大小進行適配，但是會感覺在小螢幕上檢視，內容過於擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別螢幕寬度、並做出相應調整的網頁設計，佈局和展示的內容可能會有所變動。
響應式佈局被大家熟知的一個重要原因就是 twitter 開源了 bootstrap。
相比自適應網站，響應式網站省去了很多的控制元件，同時也省去了不少建立和維護的功夫。響應式佈局就是一種流體，在按百分比縮放時也能相當的流暢。
使用響應式設計，你要記住所以的佈局。這當然可能會使過程混亂，並且使設計更加複雜。這就意味著你應該專注於中等解析度的檢視，然後再用media querie調整為更低或更高的解析度。 所以通常的做法是，在一個新的專案中使用響應式設計，在後期的改造中使用自適應設計。
自適應可用於改造現有的網站使其更好地適應移動端。這使你的設計可控制和開發多個特定的檢視。你開發檢視的數量完全取決於你，你的公司和全面的預算。然而，它也提供了一定量的控制元件（例如在內容和佈局上），如此你便無須使用響應式設計。但當你設計多種解析度時你會發現，在改變視窗大小的時候將會“跳出”佈局。
自適應網站可以用於設計和開發一個擁有多個自適應檢視的網站。所以這種設計通常用於改造網站。
自適應：自適應
響應式：響應式
更多：more
7.參考文獻
參考一：響應式和自適應的區別
參考二：響應式與自適應設計
視訊連結 密碼: h3x2
感謝大家觀看
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧~
我的邀請碼：12361358，或者你可以直接點選此連結：http://www.jnshu.com/login/1/12361358
作者：我是一隻北極熊啊
連結：https://www.jianshu.com/p/af33f6fdb35e
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地