整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
動設(shè)備正超過桌面設(shè)備，成為訪問互聯(lián)網(wǎng)的最常見終端。于是，網(wǎng)頁設(shè)計師不得不面對一個難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁？自適應(yīng)網(wǎng)頁設(shè)計的出現(xiàn)很好的解決了這個問題。這篇文章將帶你了解一些關(guān)于自適應(yīng)網(wǎng)頁設(shè)計的基礎(chǔ)知識和設(shè)計范例。
2011年，網(wǎng)頁設(shè)計師Aaron Gustafson在他的書《自適應(yīng)網(wǎng)頁設(shè)計》里率先提出了自適應(yīng)網(wǎng)頁設(shè)計的概念。
Adaptive design (自適應(yīng)設(shè)計)：為不同類別的設(shè)備建立不同的網(wǎng)頁，檢測到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁。目前AWD網(wǎng)頁主要針對這幾種分辨率（320，480，760，960，1200，1600）
和響應(yīng)式網(wǎng)頁不同，自適應(yīng)設(shè)計是基于斷點使用靜態(tài)布局，一旦頁面被加載就無法再進行自動適應(yīng)，自適應(yīng)會自動檢測屏幕的大小來加載適當(dāng)?shù)墓ぷ鞑季帧Ｒ虼耍?dāng)您在電腦上打開瀏覽器瀏覽網(wǎng)頁時，該網(wǎng)站會自動檢測并選擇該桌面屏幕的最佳布局。
基礎(chǔ)的網(wǎng)頁設(shè)計涵蓋了幾大重要環(huán)節(jié)：
而做好自適應(yīng)網(wǎng)頁設(shè)計則需要遵循以下幾個步驟：
為了適應(yīng)屏幕，不少移動瀏覽器都會把HTML頁面置于較大視口寬度（一般會大于屏幕寬度），你可以使用viewport meta標(biāo)簽來設(shè)定。以下viewport meta標(biāo)簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進行初始縮放：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
在這個例子中，頁面布局包括 Header, Content, Sidebar和Footer. Header固定高度為180px, Content寬600px, Sidebar寬300px。
CSS3 media query是自適應(yīng)網(wǎng)頁設(shè)計的關(guān)鍵，就像高級語言里的if條件語句，告訴瀏覽器根據(jù)不同的視口寬度（這里等于瀏覽器寬度）來渲染網(wǎng)頁。
目前很多網(wǎng)站在PC端和手機端已經(jīng)采用了自適應(yīng)設(shè)計，在不同的設(shè)備上瀏覽網(wǎng)頁時已經(jīng)可以很好的體驗到自適應(yīng)網(wǎng)頁設(shè)計。比如，Amazon, USA Today, Apple, and About.com等。但自適應(yīng)設(shè)計在移動網(wǎng)站上顯示的布局可能與桌面版本會有所不同。所以，做自適應(yīng)網(wǎng)頁設(shè)計時，設(shè)計師需要做更多的工作來滿足至少6種常見的布局需求。
這里有一些優(yōu)秀的自適應(yīng)網(wǎng)頁設(shè)計范例供各位設(shè)計師朋友參考。
與使用自適應(yīng)網(wǎng)頁設(shè)計（如CNN）的其他網(wǎng)站類似，亞馬遜鼓勵用戶下載其品牌應(yīng)用。 據(jù)報道，通過采用自適應(yīng)設(shè)計，亞馬遜移動端的訪問速度比以往的響應(yīng)式網(wǎng)頁設(shè)計提高了40%。并且，此外，亞馬遜的自適應(yīng)網(wǎng)站為移動用戶提供了在移動設(shè)備上使用“Amazon.com全站點”的機會，而響應(yīng)式設(shè)計并不會提供。
蘋果的設(shè)計向來以簡潔著稱，不論是它的網(wǎng)站、商店，還是產(chǎn)品設(shè)計無不體現(xiàn)著這一主題。沒有采用響應(yīng)式網(wǎng)頁設(shè)計，這一點讓蘋果飽受詬病。畢竟，它的一系列智能產(chǎn)品就是響應(yīng)式設(shè)計存在的原因之一。現(xiàn)在，蘋果采用了自適應(yīng)網(wǎng)頁設(shè)計，這也意味著蘋果的官網(wǎng)將會隨著設(shè)備類型和功能做出改變。
在線奢侈品購物網(wǎng)站Avenue 32是一家采用自適應(yīng)網(wǎng)頁設(shè)計的典范。該品牌的特色是設(shè)計師與Usablenet合作，創(chuàng)造出無縫，直觀和極具視覺吸引力的移動和平板電腦體驗。根據(jù)Usablenet的說法，桌面版網(wǎng)站上充滿了內(nèi)容豐富的網(wǎng)頁，包括產(chǎn)品圖片，設(shè)計師細(xì)節(jié)，策展的外觀等等，這個品牌必須創(chuàng)建一個視覺和功能上與這種桌面體驗一致的多渠道網(wǎng)絡(luò)產(chǎn)品。
Usablenet首席營銷官Carin van Cuuren表示：“采用自適應(yīng)網(wǎng)頁設(shè)計使Avenue 32能夠突出其移動端的發(fā)現(xiàn)和商務(wù)功能，從而使客戶能夠隨時隨地瀏覽和購物。 “而且，智能手機和平板電腦的訂單增長了40%，移動流量翻了一番，平均移動交易增長了27%。”
自適應(yīng)網(wǎng)頁設(shè)計讓“今日美國”（USA Today）選擇了一種自適應(yīng)方法，因為該技術(shù)允許品牌通過考慮操作系統(tǒng)和屏幕尺寸來檢測特定設(shè)備，以提供量身定制的體驗。” 因此，提供比響應(yīng)式更豐富的新聞體驗可能會更受歡迎。
各類新聞網(wǎng)站都采用了自適應(yīng)網(wǎng)頁設(shè)計，因為它能快速加載網(wǎng)頁和滿足所有不同設(shè)備的讀者訪問網(wǎng)站。
以上5個自適應(yīng)網(wǎng)頁設(shè)計的案例從各自不同的角度，不管是網(wǎng)頁的訪問速度，品牌影響效應(yīng)，或是用戶體驗方面都極大的說明了為什么自適應(yīng)網(wǎng)頁設(shè)計會變的流行起來。
本文由 @安靜的熊先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
Pure.css是一組小型的自適應(yīng)CSS模塊，可以在每個Web項目中使用。Pure以Normalize.css為基礎(chǔ)，并提供native HTML元素以及最常見的UI組件的布局和樣式，考慮到移動設(shè)備，Pure具有開箱即用的響應(yīng)能力，因此元素在所有屏幕尺寸上都看起來不錯。
<link rel="stylesheet" href="./pure-min.css" />
PS：Normalize.css使瀏覽器更一致地渲染所有元素，并符合現(xiàn)代標(biāo)準(zhǔn)。它只針對需要規(guī)范化的樣式。
https://github.com/pure-css/pure
通過使用Grid，Menu等，可以輕松創(chuàng)建適用于所有屏幕尺寸的精美響應(yīng)式布局。
Pure的設(shè)計目標(biāo)是可以在每個Web項目中使用它
與其他框架不同，Pure的設(shè)計不受限制，最小且扁平。添加新的CSS規(guī)則比覆蓋現(xiàn)有規(guī)則要容易得多。通過添加幾行CSS，可以自定義Pure的外觀以與你的Web項目一起使用。
以下創(chuàng)建默認(rèn)的內(nèi)聯(lián)表單，將pure-form類名添加到任何<form>元素。如下
<form class="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>還有其他常見類型表單，本文不過多介紹
要設(shè)置HTML表的樣式，請?zhí)砑?strong class="highlight-text">pure-table類名。此類為表元素添加了填充和邊框，并強調(diào)了標(biāo)題。
默認(rèn)情況下，菜單是垂直的。
要創(chuàng)建水平菜單，請?zhí)砑?strong class="highlight-text">pure-menu-horizontal類名稱。
本文只介紹了部分有關(guān)于Pure的內(nèi)容，詳細(xì)的介紹可以Github以及官方提供的詳細(xì)內(nèi)容和使用指南！
如今人們經(jīng)過手機閱讀網(wǎng)頁占了大多數(shù)，隨著閱讀方式的改動，網(wǎng)頁完成多終端自適應(yīng)，無論關(guān)于防止工程師無謂的反復(fù)勞動或者是項目管理的便利性上來說重要性都是非常巨大的。
由于挪動設(shè)備越來越多的被人們運用，手機成為訪問互聯(lián)網(wǎng)的最常見終端，而我們設(shè)計的網(wǎng)頁確是為了呈如今PC端。
手機的屏幕比擬小，寬度通常在600像素以下，而PC的屏幕寬度，普通都在1000像素以上（目前主流寬度是1366×768），有的還到達了2000像素。同樣的內(nèi)容，要在大小懸殊的屏幕上，都呈現(xiàn)出稱心的效果，并不是一件容易的事。
很多網(wǎng)站的處理辦法，是為不同的設(shè)備提供不同的網(wǎng)頁，比方特地提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比擬費事，同時要維護好幾個版本，而且假如一個網(wǎng)站有多個portal（入口），會大大增加架構(gòu)設(shè)計的復(fù)雜度。
自適應(yīng)是為了解決如何在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁。
如何進行自適應(yīng)網(wǎng)頁設(shè)計
通俗的講，移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認(rèn)情況下，一般來講，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因為考慮到移動設(shè)備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計的網(wǎng)站移動設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個是由設(shè)備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條，因為瀏覽器可視區(qū)域的寬度是比這個默認(rèn)的viewport的寬度要小的。
該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會使用那個比屏幕寬的默認(rèn)viewport，也就是說會出現(xiàn)橫向滾動條。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
把移動設(shè)備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動設(shè)備的viewport，ideal viewport的寬度等于移動設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，那些針對ideal viewport 而設(shè)計的網(wǎng)站，不需要用戶手動縮放，也不需要出現(xiàn)橫向滾動條，都可以完美的呈現(xiàn)給用戶。
要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動設(shè)備的屏幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個特殊的值就行了。
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設(shè)備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計的網(wǎng)頁中，我們無需對這個津津計較，但在移動設(shè)備上，必須弄明白這點。在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。
流動布局（fluid grid） "流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。
"自適應(yīng)網(wǎng)頁設(shè)計"的核心，就是CSS3引入的MediaQuery模塊。 它的意思就是，自動探測屏幕寬度，然后加載相應(yīng)的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文件。
自適應(yīng)與響應(yīng)式的區(qū)別
自適應(yīng)是為了解決如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁，讓同一張網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整網(wǎng)頁內(nèi)容大小。但是無論怎樣，他們主體的內(nèi)容和布局是沒有變的。
自適應(yīng)還是暴露出一個問題，如果屏幕太小，即使網(wǎng)頁能夠根據(jù)屏幕大小進行適配，但是會感覺在小屏幕上查看，內(nèi)容過于擁擠，響應(yīng)式正是為了解決這個問題而衍生出來的概念。它可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計，布局和展示的內(nèi)容可能會有所變動。
響應(yīng)式布局被大家熟知的一個重要原因就是 twitter 開源了 bootstrap。
相比自適應(yīng)網(wǎng)站，響應(yīng)式網(wǎng)站省去了很多的控件，同時也省去了不少建立和維護的功夫。響應(yīng)式布局就是一種流體，在按百分比縮放時也能相當(dāng)?shù)牧鲿场?/p>
使用響應(yīng)式設(shè)計，你要記住所以的布局。這當(dāng)然可能會使過程混亂，并且使設(shè)計更加復(fù)雜。這就意味著你應(yīng)該專注于中等分辨率的視圖，然后再用media querie調(diào)整為更低或更高的分辨率。 所以通常的做法是，在一個新的項目中使用響應(yīng)式設(shè)計，在后期的改造中使用自適應(yīng)設(shè)計。
自適應(yīng)可用于改造現(xiàn)有的網(wǎng)站使其更好地適應(yīng)移動端。這使你的設(shè)計可控制和開發(fā)多個特定的視圖。你開發(fā)視圖的數(shù)量完全取決于你，你的公司和全面的預(yù)算。然而，它也提供了一定量的控件（例如在內(nèi)容和布局上），如此你便無須使用響應(yīng)式設(shè)計。但當(dāng)你設(shè)計多種分辨率時你會發(fā)現(xiàn)，在改變窗口大小的時候?qū)疤觥辈季帧?/p>
自適應(yīng)網(wǎng)站可以用于設(shè)計和開發(fā)一個擁有多個自適應(yīng)視圖的網(wǎng)站。所以這種設(shè)計通常用于改造網(wǎng)站。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
