響應(yīng)式網(wǎng)站設(shè)計(jì)，應(yīng)該按照什么尺寸設(shè)計(jì)網(wǎng)站？

中保特衛(wèi)公司認(rèn)為，并不存在所謂的“標(biāo)準(zhǔn)網(wǎng)站尺寸”。設(shè)備的種類那么多，型號(hào)版本和屏幕分辨率一直在變。而每個(gè)網(wǎng)站吸引的用戶所使用的設(shè)備有各有不同。比如，你很可能（在廚房里做飯時(shí)）選擇在移動(dòng)設(shè)備上查看菜譜，而（在想要用Photoshop做點(diǎn)什么時(shí)）選擇在PC上搜索PS教程。

你借助Google Analytics了解哪些瀏覽器和網(wǎng)頁大小最適合你的網(wǎng)站。而面對(duì)瀏覽器大小和設(shè)備的無限組合，你到底應(yīng)該怎么進(jìn)行響應(yīng)式設(shè)計(jì)呢？

嘗試設(shè)計(jì)至少3種布局

響應(yīng)式網(wǎng)站設(shè)計(jì)應(yīng)該針對(duì)不同瀏覽器寬度設(shè)計(jì)至少三種布局。下面的數(shù)字僅限舉例，并不是固定標(biāo)準(zhǔn)。

·�。�600px以下。大部分手機(jī)適用。

·中：600px – 900px。大部分平板設(shè)備、部分大屏手機(jī)、部分小型上網(wǎng)本適用。

·大：大于900px。大部分PC適用。

這些布局中的每一個(gè)都應(yīng)包含相同的文本和圖形元素，但每個(gè)布局都應(yīng)設(shè)計(jì)為根據(jù)用戶的設(shè)備以最佳方式顯示內(nèi)容�？s小頁面以適應(yīng)小屏幕會(huì)降低內(nèi)容的易讀性，但如果你能將內(nèi)容相應(yīng)地縮小，并變成一欄，那么內(nèi)容將更易于閱讀。

響應(yīng)式網(wǎng)站設(shè)計(jì)的基本原理

應(yīng)考慮的問題：

·用戶體驗(yàn)是關(guān)鍵：響應(yīng)式設(shè)計(jì)需要的不僅僅是將PC網(wǎng)站轉(zhuǎn)化為移動(dòng)網(wǎng)站。我們需要考慮用戶體驗(yàn)，他們的互動(dòng)以及他們?cè)谑褂靡苿?dòng)設(shè)備時(shí)真正想要尋找的內(nèi)容。

·不要為了最新的有特定屏幕尺寸的移動(dòng)設(shè)備專門設(shè)計(jì)。正確的做法是圍繞內(nèi)容來做。網(wǎng)站布局和各種元素在PC上如何，同樣的元素應(yīng)該如何在移動(dòng)設(shè)備上互相適應(yīng)？這才是你應(yīng)該關(guān)注的問題。

設(shè)計(jì)by Karol Ortyl

·參與：布局的層次結(jié)構(gòu)是非常重要的，特別是在移動(dòng)設(shè)備上。通常情況下我們都秉持著“少即是多”的理念。與桌面PC相比，移動(dòng)端體驗(yàn)集中在有限的空間中，因此用戶在網(wǎng)站的閱讀和移動(dòng)方式需要非常清晰，以便了解你的主要信息，并了解網(wǎng)站的內(nèi)容。此外還要考慮頁面的主要?jiǎng)幼鳌Ｈ绻�主要目�?biāo)是讓用戶點(diǎn)擊“聯(lián)系我們”按鈕，那么就不要把它隱藏在頁面中大量文本之下。一定要圍繞這些經(jīng)驗(yàn)量身定制你的內(nèi)容和設(shè)計(jì)。

·自適應(yīng)圖片對(duì)響應(yīng)式網(wǎng)站設(shè)計(jì)非常重要。你需要考慮圖像的縮放問題。它在電腦寬屏、平板、小型移動(dòng)設(shè)備屏幕上看起來如何？從開發(fā)角度來看，代碼將允許圖像通過百分比值縮放到瀏覽器窗口的寬度。

·手機(jī)網(wǎng)站的導(dǎo)航是非常重要的。整理大型菜單和內(nèi)容有幾種常用的方法。 可以是常見的漢堡式菜單，可以是簡(jiǎn)單的下拉列表選擇，可以是展開/折疊字段，也可以像Youtube那樣使用橫向滾動(dòng)的標(biāo)簽。

響應(yīng)式網(wǎng)站設(shè)計(jì)的基本原理

設(shè)計(jì)by UI Garage

·手勢(shì)為設(shè)計(jì)開辟了新的可能性。人們喜歡用手讀書并與內(nèi)容進(jìn)行交互–它賦予了用戶更多的便利。在手機(jī)和平板電腦上，用戶可以通過手指的活動(dòng)在屏幕上放大或滑動(dòng)圖像�；�動(dòng)對(duì)設(shè)計(jì)有很大的的影響。例如，如果你有圖像庫，請(qǐng)避免使用標(biāo)準(zhǔn)輪播（小點(diǎn)）讓人們循環(huán)瀏覽每個(gè)圖像。想想一個(gè)人手指的大小，以及如何將它轉(zhuǎn)化為有用的UI解決方案。據(jù)蘋果公司稱，可觸控的UI元素的最小舒適尺寸是44 x 44px。這個(gè)限制經(jīng)常被打破，真正的最小尺寸其實(shí)在25px左右。復(fù)合桌面設(shè)計(jì)需要能夠適應(yīng)一個(gè)小型移動(dòng)屏幕的簡(jiǎn)單直觀UI。在為不同設(shè)備進(jìn)行設(shè)計(jì)時(shí)，請(qǐng)始終牢記這一點(diǎn)。設(shè)計(jì)必須具有靈活性，這樣才能為用戶創(chuàng)造對(duì)于所有設(shè)備的良好體驗(yàn)。與開發(fā)人員密切合作，了解小屏幕上可能出現(xiàn)的哪些內(nèi)容會(huì)影響設(shè)計(jì)過程。

·為不同的瀏覽器寬度設(shè)計(jì)至少三個(gè)版本。比如尺寸分別為600px、600-900px以及900px+。在這些寬度之間，你的內(nèi)容可以自由縮放，或者可以保留3個(gè)固定的布局。有3個(gè)（或更多）固定布局并在必要時(shí)添加邊距通常比流體縮放在設(shè)計(jì)和實(shí)現(xiàn)上更容易。然而，流體縮放可以在更多的設(shè)備上提供更好的體驗(yàn)。

工具與資源

·網(wǎng)絡(luò)瀏覽器當(dāng)然是很好的工具，也是預(yù)覽設(shè)計(jì)的最有效資源。你應(yīng)該安裝幾個(gè)不同的瀏覽器來獲得反饋。然后調(diào)整瀏覽器窗口的大小。

·你的移動(dòng)設(shè)備當(dāng)然也是可用工具，在預(yù)覽設(shè)計(jì)效果時(shí)非常有用，能讓你了解網(wǎng)站在特定條件下的狀況。

·流體網(wǎng)格是基于百分比值而不是設(shè)置像素來設(shè)計(jì)網(wǎng)站布局。如，PC端網(wǎng)站內(nèi)容的寬度是930px，但你希望在移動(dòng)端的寬度能夠降到320px。這個(gè)縮小比例大約是34.4%。把這個(gè)應(yīng)用到移動(dòng)端，設(shè)計(jì)布局中的元素將相應(yīng)地調(diào)整大小。

響應(yīng)式網(wǎng)站設(shè)計(jì)的基本原理

·Google的響應(yīng)式網(wǎng)站測(cè)試工具Resizer是在不同設(shè)備預(yù)覽網(wǎng)站的非常好用的工具。

·媒體查詢是一種能夠能在網(wǎng)站建設(shè)時(shí)就實(shí)施的代碼。媒體查詢可以讓網(wǎng)站根據(jù)設(shè)備顯示器的特性為其設(shè)定CSS樣式。比如，“當(dāng)屏幕尺寸為480px或以下，變?yōu)槠桨逶O(shè)計(jì)布局�！痹囈幌拢�在電腦上把瀏覽器窗口縮小，你會(huì)發(fā)現(xiàn)內(nèi)容也隨之重新自動(dòng)調(diào)整以適應(yīng)窗口的大小。

太原響應(yīng)式企業(yè)網(wǎng)站模板1600起，自動(dòng)適應(yīng)電腦、平板、手機(jī)等設(shè)備，精彩案例請(qǐng)聯(lián)系本站qq獲取。