響應(yīng)式網(wǎng)頁設(shè)計(jì)面臨的挑戰(zhàn)
隨著設(shè)備的數(shù)量和種類的增加，我們訪問互聯(lián)網(wǎng)，新的網(wǎng)頁設(shè)計(jì)挑戰(zhàn)自己。
它不再僅僅有一個(gè)移動版本和瀏覽器版本。現(xiàn)在，我們必須考慮是否人訪問我們的網(wǎng)站是從平板電腦訪問，智能手機(jī)（無論智能手機(jī)有一個(gè)高分辨率的屏幕或不），上網(wǎng)本，臺式電腦或全尺寸筆記本電腦（無論是一個(gè)具有高分辨率和低分辨率的屏幕），或一些其他的設(shè)備完全。
和所有這些不同的可能性優(yōu)化經(jīng)驗(yàn)越來越精明的互聯(lián)網(wǎng)用戶之間的預(yù)期。
幾年前，一個(gè)設(shè)計(jì)師可以通過設(shè)備列表他們設(shè)計(jì)并創(chuàng)建為每個(gè)設(shè)備的個(gè)人網(wǎng)站設(shè)計(jì)。但隨著設(shè)備的數(shù)量和種類增加，成為一個(gè)不切實(shí)際的，費(fèi)時(shí)的事情。
相反，設(shè)計(jì)師要設(shè)計(jì)出適應(yīng)每個(gè)瀏覽器的需要，無論設(shè)備。
 

屏幕越來越大
臺式機(jī)和筆記本電腦的屏幕分辨率越來越大。就在幾年前，一個(gè)1280 x 800像素的分辨率似乎很大。現(xiàn)在，那是相當(dāng)多的筆記本電腦上常見的屏幕分辨率的底端，它的情況并不少見新顯示器擁有全高清的屏幕分辨率（1920 x 1080像素）。
我們達(dá)到了什么對顯示器的實(shí)際上限（目前的接口技術(shù)，但未來的發(fā)展可能會改變），但即使設(shè)計(jì)1920像素的寬度比的屏幕只有1024像素寬的設(shè)計(jì)有很大不同。或至少是它應(yīng)該的。

增加了潛在的大屏幕的問題是，很多游戲的系統(tǒng)和新的電視現(xiàn)在已經(jīng)可以上網(wǎng)。這些其實(shí)都有很好的內(nèi)置瀏覽器，它是完全有可能的，你的一些網(wǎng)站的訪問者將在55″高清電視觀看您的網(wǎng)站。

但在移動設(shè)備
在光譜的另一端是平板電腦的互聯(lián)網(wǎng)用戶正在訪問的網(wǎng)站主要是從他們的智能手機(jī)，數(shù)量巨大，或上網(wǎng)本。這些設(shè)備屏幕的范圍可以從240×320像素（在一些低端的老年智能手機(jī)）1024 x 600或768（在一些上網(wǎng)本和平板電腦）。

顯然，一個(gè)網(wǎng)站設(shè)計(jì)一個(gè)監(jiān)控的1280像素寬，不去看屏幕上的只有320像素寬。甚至一個(gè)600或800像素寬。水平滾動，尤其是在觸摸屏設(shè)備，是惱人的最好。
一個(gè)手機(jī)網(wǎng)站使用的是最佳解決方案，不同的屏幕分辨率設(shè)計(jì)。但是現(xiàn)在有一個(gè)巨大的尺寸范圍，而不僅僅是“正常的”和“小”，這是不是最好的主意了。移動網(wǎng)站設(shè)計(jì)為240×320像素的屏幕不會在iPad上看起來很好（或甚至與視網(wǎng)膜顯示新的iPhone）。如果你設(shè)計(jì)的視網(wǎng)膜顯示屏分辨率更高的屏幕或類似的裝置，你會疏遠(yuǎn)了很多使用其他智能手機(jī)，沒有游客有這樣高分辨率的屏幕。
 

柔性基礎(chǔ)
從一個(gè)靈活的基礎(chǔ)是很重要的。單獨(dú)的流體網(wǎng)格是不夠的。你還需要一個(gè)網(wǎng)格或布局，可以根據(jù)屏幕分辨率和設(shè)備類型的變化。簡單的布局，這可不是一個(gè)高階。但如果你想要的東西更復(fù)雜一點(diǎn)，使用不同數(shù)目取決于屏幕寬度的列，有幾件事你必須考慮。
靈活的布局

創(chuàng)建一個(gè)流體網(wǎng)格是創(chuàng)建一個(gè)更棒的方式響應(yīng)設(shè)計(jì)。最好的流體網(wǎng)格將調(diào)整大小和重新定位的內(nèi)容是必要的，因?yàn)槠聊粚挾鹊淖兓?/p>

例如，只要你的屏幕分辨率高于800px寬，一個(gè)三柱布局會在3列，每列的簡單調(diào)整最佳的服務(wù)內(nèi)容的寬度。但當(dāng)屏幕寬度低于第三列為，你會放棄你的第二列下，使每一列可以留下一個(gè)易讀的寬度。

如果屏幕變得更窄，比方說480px（典型的在許多智能手機(jī)），整個(gè)設(shè)計(jì)滴一列，第二和第三列出現(xiàn)以下主要內(nèi)容。如果導(dǎo)航是包含在其中的一列，它可能會遷移到網(wǎng)頁的頂端，所以它仍然是容易。
使用CSS3媒體查詢，讓我們的目標(biāo)不只是一個(gè)特定的設(shè)備（如移動設(shè)備），而且在這些設(shè)備的特殊規(guī)范。所以我們可以有許多不同的尺寸的設(shè)備獨(dú)立的樣式。
雖然在CSS3媒體查詢的美，是他們也可以在CSS的使用權(quán)。所以，如果我們需要改變的是列數(shù)，或類似的東西，我們可以定義一個(gè)“媒體在樣式表中的規(guī)則。webdesignerwall有一個(gè)偉大的概述如何使用CSS3媒體查詢。

流體圖像
創(chuàng)建圖像調(diào)整到列或div大小，他們是在一個(gè)流體布局，創(chuàng)造一個(gè)更敏感的設(shè)計(jì)的另一個(gè)重要方面。為列進(jìn)行調(diào)整，它們包含的圖像可以調(diào)整使他們?nèi)苑显摿械募s束。

寬屏幕的考慮
根據(jù)statowl在過去的三個(gè)月，而非73%的移動互聯(lián)網(wǎng)用戶使用電腦的分辨率高于1024×768。如果你看看數(shù)據(jù)統(tǒng)計(jì)為1024 x 768而言，你會發(fā)現(xiàn)它是失去市場份額。很明顯，已經(jīng)有更高的屏幕分辨率，設(shè)計(jì)師會忽略不明智的一個(gè)巨大的轉(zhuǎn)變。
當(dāng)然，只是因?yàn)橛幸恍┯脩粲姓l已經(jīng)轉(zhuǎn)移到更大的屏幕分辨率并不意味著在每一個(gè)設(shè)計(jì)師應(yīng)該跳上寬的行列，開始重新設(shè)計(jì)他們的客戶。手機(jī)采用的是更重要的比此刻更寬的寬度。但由于我們希望說服你現(xiàn)在的反應(yīng)是新網(wǎng)站設(shè)計(jì)方法設(shè)計(jì)方法和設(shè)計(jì)，重要的是要考慮如何讓網(wǎng)站更大的寬度。

誰用更高分辨率的屏幕？
任何人工作的設(shè)計(jì)或創(chuàng)意領(lǐng)域可能有一個(gè)屏幕分辨率至少為1280像素寬（如果不是更大）。這包括網(wǎng)絡(luò)和圖形設(shè)計(jì)師，導(dǎo)演，攝影師，和其他。懂技術(shù)的用戶也更可能使用更高分辨率的屏幕，因?yàn)樗麄兏菀咨壸约旱碾娔X設(shè)備進(jìn)行定期。
富有的消費(fèi)者是另一組可能使用更高分辨率的顯示器。喜歡和精通技術(shù)的用戶，這是因?yàn)橛懈嗟目芍涫杖氲娜烁赡芏ㄆ谫徺I新電腦。當(dāng)然，這種影響是增加消費(fèi)者都是有錢人和技術(shù)嫻熟。

MAC的球迷將是另一組更可能使用更高的屏幕分辨率，由于新的MacBook，iMac，和其他的蘋果電腦都有至少1280 x 800的屏幕分辨率。當(dāng)然，這不包括他們運(yùn)行在iOS產(chǎn)品（iPhone，iPod touch和iPad）。

誰不是用更高的分辨率的屏幕？
雖然有很多用戶在使用更高分辨率的屏幕，仍然有很多互聯(lián)網(wǎng)用戶誰沒有這些分為幾個(gè)不同的組。
學(xué)生可能是一個(gè)低分辨率的用戶的最大群體。學(xué)校經(jīng)常要做五年或十年的電腦，并且在許多情況下，電腦他們甚至不是最先進(jìn)的當(dāng)他們購買。如果你的網(wǎng)站是針對教育用戶（包括學(xué)校的教師和管理人員，除了學(xué)生），你可能會看很多的屏幕只有1024像素寬的用戶，甚至有些人還有監(jiān)視器設(shè)置為800像素寬。

企業(yè)用戶往往有較低的屏幕分辨率，太。許多非科技企業(yè)將堅(jiān)持直到它完全過時(shí)的電腦設(shè)備升級之前。這是有道理的，尤其是考慮到升級數(shù)十或數(shù)百臺計(jì)算機(jī)在一次成本。如果你瞄準(zhǔn)的是企業(yè)用戶，你可能要堅(jiān)持一個(gè)基于1024的寬度設(shè)計(jì)。
最后一組，可能有較低分辨率的屏幕上人不重視技術(shù)。而這些人用不碰計(jì)算機(jī)，現(xiàn)在很多人都在家中有電腦看到的價(jià)值。但他們也不可能去花費(fèi)幾百美元的PC上，或者如果你的網(wǎng)站是專注于非技術(shù)用戶從一個(gè)家庭成員或分類廣告會使用電腦，特別是在農(nóng)村地區(qū)，你要仔細(xì)考慮可能的屏幕分辨率是什么，并據(jù)此設(shè)計(jì)。

跟蹤訪問者
上面提到的所有東西給我們帶來了一個(gè)采取最重要的步驟，如果你正在考慮一個(gè)更大的屏幕分辨率設(shè)計(jì)：跟蹤誰來到你的網(wǎng)站，看看他們使用的訪客屏幕分辨率。任何好的分析程序會給你這個(gè)信息，這是非常有價(jià)值的決策這樣。
如果你發(fā)現(xiàn)你的用戶絕大多數(shù)都是來自更高的屏幕分辨率的電腦，然后你可以設(shè)計(jì)你的網(wǎng)站對于用戶沒有看到太多的影響。但如果你發(fā)現(xiàn)大量的訪問者仍然使用1024或更窄的屏幕分辨率，那么你可能要重新考慮。

更寬的寬度是重要的創(chuàng)新
我相信有很多設(shè)計(jì)師有誰真的看不見的點(diǎn)在較寬的寬度。他們在960像素的快樂設(shè)計(jì)。他們有合適的系統(tǒng)設(shè)計(jì)的寬度。他們有前960像素的CSS文件的所有設(shè)置。他們?yōu)槭裁匆邌幔坑绕涫钱?dāng)大量的互聯(lián)網(wǎng)用戶仍然有屏幕，1024像素寬的工作。
簡單的答案是，只要我們堅(jiān)持設(shè)計(jì)1024，沒有激勵對大多數(shù)消費(fèi)者升級。這意味著沒有激勵制造商創(chuàng)造更高分辨率的產(chǎn)品。
例如，如果1280是標(biāo)準(zhǔn)的，如果大多數(shù)網(wǎng)站有1140像素寬或更寬，很可能會與iPad的分辨率至少1280開發(fā)。但因?yàn)?024的標(biāo)準(zhǔn)是，iPad不需要比這更高的分辨率。同樣的原則也適用于上網(wǎng)本。由于網(wǎng)絡(luò)的設(shè)計(jì)是圍繞屏幕寬度為1024像素，主要用于網(wǎng)絡(luò)使用的設(shè)備不需要比這更高的分辨率。
通過推動網(wǎng)站設(shè)計(jì)更廣泛的寬度，我們鼓勵升級和創(chuàng)新。另外，這些額外的180個(gè)像素（960和1140之間的差異）可以開辟新的可能性在用戶界面設(shè)計(jì)和用戶體驗(yàn)的世界。就像160像素獲得了當(dāng)我們從800到960更可能的事。

廣寬的缺點(diǎn)
雖然有一定的優(yōu)勢，創(chuàng)造更廣闊的設(shè)計(jì)，也有一定的缺點(diǎn)的實(shí)踐。這些都是很容易克服的，但重要的是要意識到他們是什么如果你想阻止他們。
寬線長度減少的可讀性
這是誘人的創(chuàng)造更廣泛的設(shè)計(jì)時(shí)，利用額外的屏幕房地產(chǎn)讓你的主要內(nèi)容范圍廣。這并不總是一個(gè)好主意，但。較長的線的長度是難以閱讀，因?yàn)檠劬τ羞M(jìn)一步的旅行在一行的末尾到下一行的開始，這意味著讀者可以更容易迷路，上錯線。這是由較小的字號加劇。走線的長度，一個(gè)快樂的中等字體很重要，和線高度。
有一對夫婦的不同的方法為適當(dāng)?shù)木€長度的計(jì)算。第一個(gè)是alphabet-and-a-half規(guī)則，結(jié)果在一個(gè)39個(gè)字符的長度（字母表中26個(gè)字母x 1.5）。適應(yīng)你的字體大小，大約39字適合你選擇的線的長度（或反之亦然）。
最優(yōu)線路長度計(jì)算的第二種方法是“分兩次”規(guī)則的適用。這是從世界絕版的繳稅，但可以適應(yīng)網(wǎng)絡(luò)容易。這條規(guī)則，你花點(diǎn)大小的字體，乘以二，然后讓你的線路長度在活字（其中，打印，12分）。所以，你要計(jì)算線的長度以像素為單位，你會把你的字體大小乘以24（12點(diǎn)字體將擁有288像素的線的長度）。
它可以幫助這兩種方法計(jì)算你的線的長度，然后進(jìn)行比較。讓你的最后一行的長度介于兩者之間。

信息過載
廣泛的內(nèi)容可以很容易地使你的網(wǎng)頁看起來很雜亂，像是有太多的事情。這也使得它更容易添加額外的列，部件，或其他內(nèi)容，可能不是真的在頁面中添加任何價(jià)值。保持良好的內(nèi)容設(shè)計(jì)原則建立你的網(wǎng)站時(shí)，它是重要的。寬敞的白色空間也讓你的網(wǎng)站看起來不雜亂的幫助。
更寬的寬度，給你更多的選擇當(dāng)談到設(shè)計(jì)，但它也使你會做出糟糕的設(shè)計(jì)決策的機(jī)會。太簡約和看起來是乏味和空洞。太多的事情，它只是看起來忙碌和混亂。
注重規(guī)模，白色的空間，在你的設(shè)計(jì)和結(jié)構(gòu)比例，確保良好的最終產(chǎn)品。小心你的更廣泛的設(shè)計(jì)并不起太多一般。
 
為什么不是每個(gè)人都做了響應(yīng)的設(shè)計(jì)嗎？
而響應(yīng)式設(shè)計(jì)是解決很多問題的核心設(shè)備被用來訪問Internet的廣泛，它也可以創(chuàng)建一些新的問題。
將移動設(shè)備，例如。如果一個(gè)人正在訪問他們的智能手機(jī)看電影的網(wǎng)站，這可能是他們最關(guān)心的是演出時(shí)間，方向去看戲，或者去劇院的電話號碼。他們希望立即訪問這些信息。裝載了整個(gè)網(wǎng)站，也包括像電影評論和其他信息，只有隱藏其中很大一部分來自移動用戶是浪費(fèi)資源。
所以重要的是要看在個(gè)案基礎(chǔ)上響應(yīng)式設(shè)計(jì)，找出如果它是一個(gè)特定的網(wǎng)站的最佳解決方案。在許多情況下，它是，但仍有一些情況下，一個(gè)更傳統(tǒng)的移動網(wǎng)站是可取的。
作為設(shè)計(jì)師，雖然，了解響應(yīng)式設(shè)計(jì)是很重要的，能夠知道什么時(shí)候是你的項(xiàng)目的合適的解決方案。由于大部分響應(yīng)的設(shè)計(jì)是建立在創(chuàng)造良好的、靈活的網(wǎng)站，它可以作為設(shè)計(jì)師的一種最佳實(shí)踐指南作為我們前進(jìn)與網(wǎng)頁設(shè)計(jì)和Web標(biāo)準(zhǔn)。
 
創(chuàng)建響應(yīng)設(shè)計(jì)更多的資源
flurid：flurid是流體網(wǎng)格設(shè)計(jì)能適應(yīng)在各種窗口的寬度。雖然不是特別敏感，對自己的（除了調(diào)整列寬），它可以作為骨干創(chuàng)建響應(yīng)式網(wǎng)站。
流體網(wǎng)格：本文從列表分開討論的優(yōu)點(diǎn)和流體網(wǎng)格工作詳情。
流體網(wǎng)格系統(tǒng)：另一種流體網(wǎng)格框架。
硬漢CSS3媒體查詢另一個(gè)很好的指南，媒體查詢。
 
響應(yīng)式網(wǎng)站設(shè)計(jì)實(shí)例
不是所有下面的設(shè)計(jì)適應(yīng)了移動的大小，但有些人，他們都可以給你，你如何使你的網(wǎng)站設(shè)計(jì)跨設(shè)備更敏感。

從一個(gè)很寬的屏幕，屏幕尺寸為最窄寬度不同的流體一個(gè)固定寬度的設(shè)計(jì)固定列寬流體寬度設(shè)計(jì)局設(shè)計(jì)的變化。

牧羊人設(shè)計(jì)文章推薦：

一個(gè)網(wǎng)頁設(shè)計(jì)機(jī)構(gòu)的工作

深圳市希品城貿(mào)易有限公司網(wǎng)站設(shè)計(jì)制作

深圳市浩銳科軟件有限責(zé)任公司網(wǎng)站設(shè)計(jì)