前一段時間，設(shè)計(jì)師的工作，他們委托做的，無論是一本書的封面，海報，報紙，等知道確切的尺寸

然而，智能手機(jī)，iPad和其他顯示器不同大小，長寬比和決議的出現(xiàn)，我們已經(jīng)失去了我們的視覺邊界的控制。

這并不奇怪，響應(yīng)性的Web設(shè)計(jì)（RWD）已經(jīng)成為新的時髦。這個趨勢是不是關(guān)于時尚美學(xué)，而不是試圖解決由于用于瀏覽互聯(lián)網(wǎng)的各種設(shè)備的可用性問題。

在這篇文章中，我將介紹的方法使用不同的設(shè)備在設(shè)計(jì)時，應(yīng)該考慮什么樣的屏幕尺寸和分辨率，以及如何從一個設(shè)計(jì)師的角度來看，RWD的工作。

響應(yīng)性的Web設(shè)計(jì)方法

當(dāng)創(chuàng)建一個網(wǎng)站，適用于所有的監(jiān)控屏幕上，最常用的方法是在標(biāo)準(zhǔn)屏幕寬度和高度的設(shè)計(jì)。目前，在監(jiān)視器屏幕的標(biāo)準(zhǔn)尺寸為1024像素×760像素，這意味著網(wǎng)絡(luò)安全區(qū)域應(yīng)該是小于-它是由548px 989px。

99designs基于網(wǎng)絡(luò)安全的矩形電流的標(biāo)準(zhǔn)的最小大小的桌面監(jiān)視器內(nèi)的主頁。

如果網(wǎng)站是一個更大的顯示器上，頁面布局會表現(xiàn)出更多的背景。超過90％的設(shè)計(jì)的網(wǎng)站使用這種方法，但它是不太相關(guān)的，當(dāng)我們?yōu)橐苿釉O(shè)備設(shè)計(jì)的。你根本不能使用相同的布局320px【2000px屏幕。

這里有一些其他的設(shè)計(jì)為不同的設(shè)備時使用的方法：

• 媒體查詢：CSS使頁面樣式（包括隱藏內(nèi)容）的網(wǎng)站上顯示該設(shè)備的特點(diǎn)的基礎(chǔ)上。頁面造型是最常用的基于瀏覽器的寬度。
• 的流體網(wǎng)格：頁面元素時，在相對 的（％）單位的尺寸和網(wǎng)格的列的數(shù)量的變化取決于上的寬度限制。

蘭開斯特大學(xué)的網(wǎng)站沒有內(nèi)容斷面寬度960px擴(kuò)大，但規(guī)模下降整齊低于400像素。請注意，在上面的內(nèi)容如何逐漸減少，滾動-注意以下420px的頁面寬度的變化。

移動設(shè)備的屏幕分辨率（和挑戰(zhàn)時，針對他們）

有幾十個圖形顯示分辨率。下表是網(wǎng)頁設(shè)計(jì)師的一些最重要的設(shè)備：

正如你可以看到，有各種不同的尺寸和分辨率（每英寸的像素定義）。的分辨率（PPI）是一個重要的因素 - 例如，iPhone 5上的圖標(biāo)的大小將是桌面顯示器上顯示時的4倍大。

有剪裁內(nèi)容，以更小的尺寸時，我們面臨的挑戰(zhàn)。因此，這里有幾件事情要記?。?/span>

1. 保持可讀：一個14px的高度2000像素寬屏幕的文本行，將縮減為2px上一個300像素寬屏幕-你就不能讀它。在另一側(cè)，縮放比例為10像素高達(dá)7倍的文本將被不合理地大。我們需要保持合理的，可讀的，印刷的比例在每個設(shè)備上的可用屏幕寬度調(diào)整我們的布局。

2. 保持可瀏覽：??重要的是要避免過多的滾動-大量的內(nèi)容推入1列，讓網(wǎng)頁很長，使得它很難獲得所需的內(nèi)容。

3. 保持它tappable：??手機(jī)屏幕支持觸摸和人的手指通常被用來處理-所以，按鈕不能太小。據(jù)蘋果公司稱：舒適的tappable UI元素的最小尺寸是44×44像素。此限制是經(jīng)常被打破，真正的估計(jì)上限大約是25像素。

現(xiàn)在，我們知道如何實(shí)現(xiàn)可讀的，可瀏覽和tappable的的接口，讓我們來看看我們需要做的，創(chuàng)建一個具有響應(yīng)性的設(shè)計(jì)。

重點(diǎn)提示，同時創(chuàng)建一個具有響應(yīng)性的Web設(shè)計(jì)

記住，創(chuàng)建一個具有響應(yīng)性的Web設(shè)計(jì)時，有一些重要的事情。這里有幾個重要的：

一個網(wǎng)頁設(shè)計(jì)應(yīng)該至少有3個版本，不同的瀏覽器寬度：?320px【480像素，480像素768px，768px +。之間的寬度，你的內(nèi)容可以自由擴(kuò)展，你可以保持3個固定的布局。有3個（或更多）固定的布局，增加利潤，在必要時通常更容易設(shè)計(jì)和實(shí)現(xiàn)比流體縮放。然而，流體結(jié)垢可能會提供更好的更大范圍內(nèi)的數(shù)量的設(shè)備的經(jīng)驗(yàn)。

在具體決議的內(nèi)容保持可見：例如，你可以選擇隱藏文章的主要部分，降低整個箱子一個按鈕，或者完全隱藏內(nèi)容。

要知道的CSS約束：設(shè)計(jì)的方式，讓盡可能多的頁面元素的純CSS。這是很重要的原因有二：它允許更多的靈活性，當(dāng)調(diào)整大小的頁面元素，并減少加載時間。大多數(shù)設(shè)計(jì)師，這是不容易的，因?yàn)樗麄兛赡懿皇煜SS。它的意思是避免使用覆蓋模式以外的其他“正?！保ǔ窃搶涌梢院喜ⅲ?，使用簡單的陰影和漸變。

使用相同的內(nèi)容完全一樣的HTML的所有決議：換句話說，我們應(yīng)該使用和重復(fù)使用相同的圖形元素的所有版本的頁面。通常情況下，我們希望創(chuàng)造最大的屏幕，然后減少為較小的決議的元素，如果需要的話。

除了這些關(guān)鍵點(diǎn)，RWD是一個問題，你的想象力和編碼器的技能。在下面的例子中，檢查出RWD可以做不同的方式。

響應(yīng)網(wǎng)頁設(shè)計(jì)的例子

叉??是一個驚人的典型混合流體縮放一個固定的布局。有4個固定的布局（塊元素的大小以像素為單位設(shè)置）。我們只看到流體波背景的div縮放。你可以看到，當(dāng)你縮放頁面上方770px。請注意，如何將內(nèi)容隱藏在這里發(fā)生。

丹尼爾葉片的個人網(wǎng)站?-一個很好的使用的流體平方米的模塊化電網(wǎng)。它填補(bǔ)了100％，無論大小的屏幕。在較小的屏幕視圖，如768px，從5列3列布局。低于480像素，它變成1列。

“波士頓環(huán)球報”（Boston Globe）網(wǎng)站是一個大的新聞網(wǎng)站，設(shè)計(jì)一個負(fù)責(zé)任的一個罕見的例子。它使用HTML5的樣板框架，它的流體網(wǎng)格，根據(jù)比例尺寸。應(yīng)該指出的是流體網(wǎng)格并不意味著無限流體縮放。對于本網(wǎng)站的例子中，最大的頁面是1232px，最低為422px的。

列數(shù)更改為620px，800px，但波士頓環(huán)球報“的樣式表定義了以上2個條件（媒體查詢）。更深入的分析表明，此頁面簡單，乍看之下?lián)碛屑s30調(diào)整到了以下決議：1400px，1300px，1220px，1210px，1200px，1150px，1100px，1050px，1024px，980px，960px，950px，931px的變種，900px，860px，809px，810px，800px，788px，768px，760px，640px，639px，620px，600px的，540px，500像素，481px，480像素，380px。

資源讓你開始！

• 到底是什么響應(yīng)性的Web設(shè)計(jì)
• 響應(yīng)性的Web設(shè)計(jì)由Ethan馬科特
• 20收藏響應(yīng)網(wǎng)站由Ethan馬科特
• RWD Twitter消息流??由Ethan馬科特
• ?由布拉德·弗羅斯特的響應(yīng)導(dǎo)航模 式
• 為響應(yīng)設(shè)計(jì)??由布拉德·弗羅斯特復(fù)雜的導(dǎo)航模 式
• 一個有趣的嘗試，使布局基于EM值的金發(fā)姑娘方法?。目的是使設(shè)計(jì)獨(dú)立于分辨率的。電腦屏幕的平均為72 ppi和現(xiàn)代平板電腦或手機(jī)擁有300 + PPI -在手機(jī)上的一個按鈕的4倍較小，即使有相同的寬度（以像素為單位）

最后，但并非最不重要的一點(diǎn)是，點(diǎn)擊下面的圖片，并下載一個透明的PNG模板的幾個設(shè)備屏幕上，你可以用它來測試或展示您的設(shè)計(jì)。

在結(jié)論

響應(yīng)性的Web設(shè)計(jì)是一個復(fù)雜的問題，但使網(wǎng)站隨時提供給更廣泛的消費(fèi)者基礎(chǔ)。隨著時間的推移，它會成為一個必須為網(wǎng)站設(shè)計(jì)者知道，并會演變成以上的移動設(shè)備（聽說過智能電視？），所以重要的是要保持你的手指上的脈搏。