響應(yīng)式網(wǎng)站規(guī)劃關(guān)于處理多類型屏幕疑問來說是個(gè)不錯(cuò)計(jì)劃，但從打印的視點(diǎn)來看，其卻存在著許多的艱難。沒有固定的頁(yè)面尺度、沒有毫米或英寸，沒有任何物理約束，讓人感到無從下手。跟著樹立網(wǎng)站可用的各種小工具不斷增加，像素規(guī)劃局限于桌面和移動(dòng)端也已經(jīng)成為前史。因而，如今就讓咱們來闡明一下怎么運(yùn)用響應(yīng)式網(wǎng)站規(guī)劃的各項(xiàng)基本原則來完成，而不是抗拒流通的頁(yè)面體會(huì)。為了簡(jiǎn)略起見，咱們將著重講規(guī)劃。

　　內(nèi)容流

　　跟著屏幕尺度越來越小，內(nèi)容所占的筆直空間也不斷增加，也即是說，內(nèi)容會(huì)向下方延伸，這就叫做內(nèi)容流。假如你習(xí)慣了運(yùn)用像素和點(diǎn)進(jìn)行規(guī)劃，也許會(huì)覺得這個(gè)有點(diǎn)難把握。不過沒關(guān)系，習(xí)慣了就極好了解了。

　　相對(duì)單位

　　你的規(guī)劃目標(biāo)也許是臺(tái)式桌面，也也許是移動(dòng)端屏幕或許介于兩者之間的恣意屏幕類型。像素密度也會(huì)互相不一樣，所以咱們需求運(yùn)用靈敏可變，而且能夠習(xí)慣各種狀況的單位。那么在這種狀況下，百分比等相對(duì)單位就派上用場(chǎng)了。運(yùn)用百分比時(shí)，咱們說寬度50%即是表明寬度占屏幕巨細(xì)(或許叫視區(qū)，也即是指所翻開瀏覽器窗口的巨細(xì))的一半。

　　斷點(diǎn)

　　斷點(diǎn)能夠讓頁(yè)面規(guī)劃在預(yù)設(shè)的點(diǎn)進(jìn)行變形，也即是說，在臺(tái)式桌面上顯現(xiàn)3欄，在移動(dòng)設(shè)備上僅顯現(xiàn)1欄。大多數(shù)CSS特點(diǎn)都能夠完成斷點(diǎn)之間的變形。斷點(diǎn)放置的方位一般取決于內(nèi)容。比方，假如一句話要換行，你也許就需求加上斷點(diǎn)。但斷點(diǎn)運(yùn)用時(shí)需求慎重——假如搞不清內(nèi)容之間的邏輯關(guān)系，很簡(jiǎn)單弄的一團(tuán)亂。

　　最大和最小值

　　有時(shí)候內(nèi)容占滿全部屏幕寬度(例如在移動(dòng)設(shè)備上)是功德，但假如相同的內(nèi)容在電視屏幕上也撐得滿滿的，貌似就不太合理了。這即是為何要有最大/最小值。例如，假如寬度為100%，最大寬度1000px，那么內(nèi)容就會(huì)以不超過1000px的寬度填充屏幕。

　　嵌套目標(biāo)

　　還記得相對(duì)方位嗎?假如一大堆要素互相都緊密聯(lián)系，那么必將難以操控。因而，將要素放置到容器中就會(huì)讓它們變得更加好了解，而且簡(jiǎn)練明快。這種狀況就需求用到像素之類的靜態(tài)單位了。靜態(tài)單位關(guān)于logo和按鈕等不需求拓展的內(nèi)容來說非常有用。

　　移動(dòng)優(yōu)先仍是臺(tái)式桌面優(yōu)先

　　嚴(yán)格來說，項(xiàng)目從小屏幕下手過渡到大屏幕(移動(dòng)優(yōu)先)，仍是從大屏幕下手過渡到小屏幕(臺(tái)式桌面優(yōu)先)差異不大。但是，從移動(dòng)端著手能夠給你帶來一些額定的約束，幫助你進(jìn)行決議計(jì)劃。一般狀況下大家會(huì)從兩方面一起著手，所以你仍是要看哪種方法最適合你。

響應(yīng)式網(wǎng)站是“響應(yīng)”訪問者正在使用的平臺(tái)。最常見的是屏幕或?yàn)g覽器大小。例如，如果瀏覽器寬度小于一定大小，則該網(wǎng)站可以編程為在一列中顯示所有內(nèi)容 - 有效地創(chuàng)建了移動(dòng)優(yōu)化的網(wǎng)站。

當(dāng)Google開始考慮到2015年4月21日網(wǎng)站是否針對(duì)移動(dòng)搜索進(jìn)行移動(dòng)設(shè)備優(yōu)化時(shí)，許多網(wǎng)站所有者自然開始考慮使自己的網(wǎng)站響應(yīng)。

如果您在大多數(shù)情況下正在委托一個(gè)新網(wǎng)站，那么您的開發(fā)人員將使網(wǎng)站具有反應(yīng)性，除非有充分的理由不要因?yàn)樵L問臺(tái)式計(jì)算機(jī)上的網(wǎng)站現(xiàn)在只能代表部分潛在流量。

無論您是否擁有在響應(yīng)需求之前構(gòu)建的舊站點(diǎn)，或者您正在構(gòu)建新站點(diǎn)的過程是一樣的（盡管后者比前者更節(jié)省時(shí)間）。

當(dāng)您查看網(wǎng)頁(yè)時(shí)，您實(shí)際上會(huì)將兩種不同的內(nèi)容整合在一起：內(nèi)容和風(fēng)格。內(nèi)容是HTML（超文本標(biāo)記語(yǔ)言），風(fēng)格是CSS（級(jí)聯(lián)樣式表）。

在響應(yīng)式網(wǎng)站中，內(nèi)容實(shí)際上并沒有改變（有時(shí)會(huì)顯示/隱藏小部分，但不需要陷入困境）。

然而，CSS的一部分可以被設(shè)置為僅在滿足某些規(guī)則時(shí)才能啟動(dòng); 瀏覽器或屏幕大小在介紹中提到。有許多類型的規(guī)則，如高度，方位和像素密度（用于視網(wǎng)膜顯示）。

使站點(diǎn)響應(yīng)的核心是遍歷每個(gè)頁(yè)面，并創(chuàng)建規(guī)則和樣式，以便站點(diǎn)在特定條件下進(jìn)行格式化。通常這是基于任意的移動(dòng)，平板電腦和桌面平臺(tái)。

除此之外，由于空間有限，導(dǎo)航更改為使用較少頁(yè)面的格式。例如，導(dǎo)航項(xiàng)目可以轉(zhuǎn)換為下拉菜單，菜單可以隱藏在屏幕之外，并通過按鈕顯示/隱藏。

最后，圖像需要優(yōu)化，因?yàn)槔速M(fèi)帶寬，以在移動(dòng)設(shè)備上顯示巨大的桌面圖像。相反，移動(dòng)圖像將在大型桌面顯示器上看起來像素化。

所有這些都不是特別困難，但是它們?cè)诖笮途W(wǎng)站上可能是耗時(shí)的。此外，測(cè)試過程更長(zhǎng)，因?yàn)槟枰獓L試在多個(gè)設(shè)備上的所有內(nèi)容。

在較小的屏幕上，將事物堆放到單個(gè)列中是移動(dòng)，并且通常，只要內(nèi)容保持在適當(dāng)?shù)膶挾葍?nèi)，進(jìn)一步考慮到頁(yè)面的高度。結(jié)果，長(zhǎng)沙網(wǎng)站建設(shè)注意到，在我自己的設(shè)計(jì)和許多在野外，移動(dòng)頁(yè)長(zhǎng)度往往是相當(dāng)長(zhǎng)的。這個(gè)帖子是一個(gè)建議，至少保持瀏覽器視口的高度，因?yàn)槟谠O(shè)計(jì)響應(yīng)式網(wǎng)站。

做響應(yīng)網(wǎng)站的摘錄在移動(dòng)設(shè)備上必須要高嗎？

但是如果你把它拉到你的手機(jī)上，你可能會(huì)注意到需要相當(dāng)多的滾動(dòng)才能瀏覽整個(gè)頁(yè)面。在我的Macbook上，頁(yè)面大約是4500像素高，大約是瀏覽器窗口可視高度的6倍。相比之下，在我的手機(jī)上，頁(yè)面大約是6,200像素高，或大約是可視高度的10倍。這不是內(nèi)在的壞; 沒有設(shè)計(jì)法規(guī)定您必須使網(wǎng)站在不同尺寸的設(shè)備上保持高度，但我認(rèn)為深入了解這是一個(gè)有趣的觀察。

所以有什么問題？

再次，我不認(rèn)為整個(gè)頁(yè)面長(zhǎng)度本身是有問題的。我已經(jīng)注意到，在許多響應(yīng)式設(shè)計(jì)中，有意義的內(nèi)容分組容易在較大的屏幕上發(fā)現(xiàn)，但是當(dāng)事情開始在移動(dòng)屏幕上疊加時(shí)，會(huì)變得混亂。例如，在Nexus頁(yè)面上，第二部分將三個(gè)硬件功能組合在一起。在一個(gè)足夠大的屏幕上，您可以看到這三個(gè)方塊并排，并且該部分通常最終完全是瀏覽器可視區(qū)域的高度。在手機(jī)上，你最終只能看到一個(gè)塊的一個(gè)塊。當(dāng)您滾動(dòng)瀏覽頁(yè)面時(shí)，這3件事情并不是明確的，而是將它們分組在一起，而不是世界的盡頭，但也不是最佳的。

有辦法嗎

最近，我一直使用設(shè)備視口的高度作為粗略的指南，以幫助確定如何布局內(nèi)容。目的是為了解決上述問題，可以在任何設(shè)備上同時(shí)合理地查看旨在分組在一起的內(nèi)容。在Nexus示例中，替代原始設(shè)計(jì)可能看起來像這樣。

通過大幅度縮小部分標(biāo)題和縮略圖的大小，我們可以將該部分的所有相同內(nèi)容適用于單個(gè)視口。這種變化本身可能只是一個(gè)小的增量改進(jìn)，但總的來說，我發(fā)現(xiàn)遵循這個(gè)一般準(zhǔn)則導(dǎo)致在滾動(dòng)瀏覽移動(dòng)設(shè)備頁(yè)面時(shí)更容易遵循的布局。

退步一點(diǎn)...

沒有什么特別的設(shè)計(jì)，我剛剛向你展示。只有許多可能的布局才能實(shí)現(xiàn)相同的目標(biāo) - 將特定部分中的內(nèi)容更清晰地分組在一起。如果您決定使用視口高度作為移動(dòng)布局的指南，那么您應(yīng)該探索所有不同的方式來定位內(nèi)容。根據(jù)您的設(shè)計(jì)背景和內(nèi)容的性質(zhì)，不同的布局可能會(huì)更好。

幾乎每個(gè)業(yè)務(wù)都需要一個(gè)網(wǎng)站，但是這些天，網(wǎng)絡(luò)并不只是你在電腦屏幕上看到的。人們使用的設(shè)備日益多樣化的互聯(lián)網(wǎng)，從智能手機(jī)到游戲機(jī)。 

麻煩的是，大多數(shù)商業(yè)網(wǎng)站還在設(shè)計(jì)時(shí)只考慮到臺(tái)式機(jī)或筆記本電腦。當(dāng)您在移動(dòng)設(shè)備的瀏覽器上查看典型的商業(yè)網(wǎng)站時(shí)，通常需要捏合，縮放和滾動(dòng)才能看到頁(yè)面上的內(nèi)容。通過觸摸屏與網(wǎng)站進(jìn)行互動(dòng)最多可能是笨拙的。

為了進(jìn)行補(bǔ)償，越來越多的企業(yè)正在部署的一個(gè)或多個(gè)移動(dòng) -優(yōu)化網(wǎng)絡(luò)設(shè)計(jì)，或“主題”，即在檢測(cè)到移動(dòng)設(shè)備時(shí)，Web服務(wù)器發(fā)送給用戶。這是第一步，但移動(dòng)設(shè)備有許多尺寸和形狀。看起來不錯(cuò)，說，iPhone可能看起來和表現(xiàn)不佳的Kindle Fire。

可以為每個(gè)主要屏幕尺寸和設(shè)備類型創(chuàng)建設(shè)計(jì)，但最終這是一個(gè)失敗的游戲。新的設(shè)備類型將超過設(shè)計(jì)師脫離自定義主題的能力。

一個(gè)解決方案是一種叫“ 響應(yīng)網(wǎng)頁(yè)設(shè)計(jì) ”，它可以使你的網(wǎng)站更容易，更便宜的進(jìn)行管理，同時(shí)給移動(dòng)用戶帶來更好的體驗(yàn)。這使您可以創(chuàng)建一個(gè)設(shè)計(jì)，將適合幾乎任何屏幕和設(shè)備類型，而且還可以提高你的搜索能見度。此外，它避免了期望用戶鍵入“m”的障礙。在您的網(wǎng)站網(wǎng)址之前訪問適合移動(dòng)設(shè)備的版本。

當(dāng)用戶訪問響應(yīng)性設(shè)計(jì)的網(wǎng)站時(shí)，站點(diǎn)感測(cè)該用戶的設(shè)備的約束，并自動(dòng)“響應(yīng)”或重新配置其自身以相當(dāng)好地顯示和運(yùn)行。它重新組織布局，例如，換出圖像和導(dǎo)航功能。

隨著新的基于Web的設(shè)備類型成為流行，如Android相機(jī)，你只需要調(diào)整你的回應(yīng)的設(shè)計(jì)，以適應(yīng)他們。

要為您的業(yè)務(wù)創(chuàng)建響應(yīng)式網(wǎng)站，您可以雇用設(shè)計(jì)師或使用支持響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的網(wǎng)站構(gòu)建工具。無論哪種方式，這五個(gè)提示可以幫助您切換到響應(yīng)式設(shè)計(jì)。

1.決定何時(shí)進(jìn)行更改。

響應(yīng)式設(shè)計(jì)是一種完全不同的管理網(wǎng)站元素的方式，這意味著很難向現(xiàn)有的傳統(tǒng)網(wǎng)站引入響應(yīng)式設(shè)計(jì)。您可能需要等到創(chuàng)建新網(wǎng)站或重建現(xiàn)有網(wǎng)站。

2.跟蹤移動(dòng)流量模式。

檢查您的網(wǎng)站統(tǒng)計(jì)信息，了解移動(dòng)訪問者的數(shù)量，繪制您的在線市場(chǎng)的這一部分的增長(zhǎng)情況，并預(yù)測(cè)未來兩到五年。增長(zhǎng)曲線越陡，越快實(shí)施響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就越重要。

3.在各種設(shè)備上查看競(jìng)爭(zhēng)對(duì)手的網(wǎng)站。

保留與您的商家類似的商家的網(wǎng)址列表。定期在各種計(jì)算機(jī)，智能手機(jī)和平板電腦上檢查它們。哪些是最容易導(dǎo)航和使用，需要最少的捏，縮放和滾動(dòng)？使用最好的作為您的設(shè)計(jì)師的指導(dǎo)。

4.雇用具有自適應(yīng)設(shè)計(jì)經(jīng)驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)師。

許多為中小型企業(yè)客戶服務(wù)的設(shè)計(jì)師仍然專注于設(shè)計(jì)用于在計(jì)算機(jī)上查看的網(wǎng)站。一定要問最近設(shè)計(jì)師的響應(yīng)設(shè)計(jì)網(wǎng)站的例子。不要只是獲取屏幕截圖 - 請(qǐng)求的URL，并檢查這些網(wǎng)站的各種設(shè)備類型，注意他們的外觀和他們的功能如何。

5.如果你自己做，使用有效，可負(fù)擔(dān)的工具。

如果你決定創(chuàng)建一個(gè)響應(yīng)設(shè)計(jì)的網(wǎng)站上你自己的，考慮嘗試的最新版本Squarespace。這是一個(gè)廉價(jià)的網(wǎng)絡(luò)托管服務(wù)，讓您通過拖放界面創(chuàng)建一個(gè)響應(yīng)網(wǎng)站。

許多小型企業(yè)網(wǎng)站的建立是為了外觀華麗全尺寸的電腦顯示器上。但是，隨著越來越多的人訪問網(wǎng)絡(luò)上的移動(dòng)設(shè)備，它不再是一個(gè)尺寸適合所有人。

其中一個(gè)更有效的方法來滿足所有用戶以及是建立-或重新設(shè)計(jì)-使用你的網(wǎng)站響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)。這包括創(chuàng)建支持用戶操作的內(nèi)容，而不考慮他們擁有的設(shè)備類型。

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)意味著您的網(wǎng)站會(huì)自動(dòng)重新配置自身或“響應(yīng)”，以適應(yīng)訪問者正在使用的設(shè)備的大小和類型。這一切都在于提高用戶體驗(yàn)，特別是使人們能夠輕松地在移動(dòng)設(shè)備上做出或找到他們想要的。這意味著頁(yè)面需要快速加載，網(wǎng)站設(shè)計(jì)應(yīng)該盡量減少調(diào)整大小，打字，滾動(dòng)和平移的需要。

在為適合移動(dòng)設(shè)備的網(wǎng)站開發(fā)內(nèi)容時(shí)需要了解哪些內(nèi)容？牢記這五個(gè)關(guān)鍵要素：

1.首先考慮智能手機(jī)用戶。

要?jiǎng)?chuàng)建一個(gè)引人注目且具有響應(yīng)性的網(wǎng)站，首先需要關(guān)注智能手機(jī)用戶。開始為小型觸摸屏設(shè)計(jì)，并從那里向上擴(kuò)展。這可以幫助確保您的網(wǎng)站滿足任何設(shè)備上的用戶，并在任何類型的互聯(lián)網(wǎng)連接上快速加載。

2.考慮支持行動(dòng)。

詢問用戶最希望找到的信息以及他們最希望在您的網(wǎng)站上做什么：

看看你是否提供他們想要的產(chǎn)品或服務(wù)？這意味著您應(yīng)該提供一個(gè)突出的產(chǎn)品搜索框或服務(wù)列表的鏈接。

要找到您的位置？請(qǐng)務(wù)必添加您的地址和地圖。

預(yù)約或預(yù)約？要注冊(cè)您的特別優(yōu)惠的電子郵件或文本提醒？小部件或鏈接可以將人們連接到這些服務(wù)。

打電話給你？這些是手機(jī)，畢竟。

是的，您仍然可以在網(wǎng)站設(shè)計(jì)的最小版本上包括有吸引力的圖片和顏色 - 只要他們快速加載，在小屏幕上顯示清晰，最重要的是，不要干擾用戶采取行動(dòng)。

3.向上擴(kuò)展到平板電腦。

一旦您設(shè)計(jì)出符合智能手機(jī)用戶需求的吸引力，高效和實(shí)用的網(wǎng)站，您就可以開始決定要為平板電腦用戶添加或交換哪些內(nèi)容。

您可能不需要更改您的內(nèi)容或布局，以適應(yīng)小型平板電腦的用戶，如iPad Mini或Kindle Fire。但是對(duì)于較大的平板電腦（如全尺寸iPad），您可能需要使用較大的圖片或在首頁(yè)中添加更多內(nèi)容，例如客戶推薦或活動(dòng)或特別活動(dòng)的公告。您還可以考慮提供視頻內(nèi)容 - 只是確保它使用HTML5，因?yàn)锳dobe Flash視頻在許多移動(dòng)操作系統(tǒng)上不起作用。

4.擴(kuò)展到計(jì)算機(jī)。

對(duì)于筆記本電腦或桌面用戶，您可以提供更豐富的內(nèi)容 - 可能是更多照片，簡(jiǎn)短的業(yè)務(wù)歷史或?qū)δ漠a(chǎn)品或服務(wù)的價(jià)值和優(yōu)勢(shì)的解釋。這些信息也可以提供給智能手機(jī)用戶，但是被放在“關(guān)于我們”菜單項(xiàng)后面，而不是顯示在主頁(yè)上。

5.計(jì)劃分析和更新。

這是一個(gè)猜測(cè)訪問者如何使用您的網(wǎng)站，而另一個(gè)實(shí)際上看到他們?cè)谀抢镒鍪裁础４_保使用網(wǎng)絡(luò)分析工具，如谷歌Analytics（分析）在您的網(wǎng)站。密切注意移動(dòng)流量與計(jì)算機(jī)流量的差異，并調(diào)整您包含的內(nèi)容以及相應(yīng)的內(nèi)容。例如，如果您發(fā)現(xiàn)許多移動(dòng)訪問者正在使用您的搜索框在您的網(wǎng)站上查找某種內(nèi)容，請(qǐng)考慮向您的主菜單中添加相應(yīng)的項(xiàng)目。這滿足了需要，同時(shí)減少了對(duì)觸摸屏打字的需要。

理想情況下，隨著時(shí)間的推移，您的網(wǎng)絡(luò)流量的移動(dòng)部分將會(huì)增長(zhǎng)。通過關(guān)注用戶操作（而不是網(wǎng)頁(yè)瀏覽量），您可以更準(zhǔn)確地跟蹤您的網(wǎng)站如何幫助您打造業(yè)務(wù)。