我每天在多個(gè)設備上瀏覽互聯(lián)網(wǎng)。我用我的MacBook Pro，iMac，pC，iPad，iPhone，甚至我的電視。所以當我看到網(wǎng)站，它不適合大的屏幕分辨率優(yōu)化，或者加載我的移動(dòng)設備需要兩分鐘時(shí)，我真的很困擾。我們都接受了響應設計的概念。很少有人反對。事實(shí)上，我**近聽(tīng)到的唯一令人信服的報告是，客戶(hù)不愿意為額外的時(shí)間付費。但隨著(zhù)任何新的實(shí)踐，神話(huà)已經(jīng)長(cháng)大，并與之對應。讓我們來(lái)看看關(guān)于破產(chǎn)的一些誤解hellip；

　　Responsive設計完全是關(guān)于移動(dòng)到移動(dòng)網(wǎng)絡(luò )的爆炸，這是Responsive設計背后的驅動(dòng)力，但當我們認為Responsive設計需要考慮的不僅僅是手機。隨著(zhù)視網(wǎng)膜顯示器和視頻游戲瀏覽器的推出，網(wǎng)民們正在關(guān)注大屏幕分辨率和不同場(chǎng)景網(wǎng)站。

　　考慮不同的用戶(hù)環(huán)境設計和開(kāi)發(fā)網(wǎng)站響應。您需要考慮哪些設備用戶(hù)：在移動(dòng)設備上或家中看電視的用戶(hù) 你需要考慮用戶(hù)在哪里：荒野中的雜貨店還是野營(yíng)在線(xiàn)用戶(hù) 如果你的網(wǎng)站在你的用戶(hù)拿著(zhù)瑪格麗塔坐在沙灘上的時(shí)候，你的網(wǎng)站需要10分鐘的加載時(shí)間，那么擁有好的內容意味著(zhù)什么呢。內容就是一切，但是環(huán)境無(wú)處不在，這完全是你無(wú)法控制的。這就是為什么，事實(shí)上，你的內容應該擴展到任何決議，大或小。我們有一套工具，允許我們在任何上下文中操縱布局、優(yōu)化文本大小和提高性能，記住要使用它們。

　　始終記住上下文轉換，這就是為什么在接近響應設計和性能時(shí)，重要的是平衡視覺(jué)布局和用戶(hù)需求。不僅僅是關(guān)于移動(dòng)。

　　Responsive設計并不適用于每個(gè)用例。我曾經(jīng)認為響應式網(wǎng)頁(yè)設計并不適合每個(gè)項目，這取決于使用情況。嗯，我**近修改了我的觀(guān)點(diǎn)。我堅信，如果我們想以用戶(hù)為中心設計，我們需要考慮每個(gè)項目的開(kāi)發(fā)人員響應設計方法。

　　固定寬度網(wǎng)站可以限制為較大和較小屏幕分辨率。底線(xiàn)是，我們的網(wǎng)站應該適合所有人，無(wú)論是什么設備或屏幕分辨率是易于使用和不受限制的。

　　響應設計是關(guān)于設備的斷點(diǎn)。我注意到一個(gè)趨勢，新興工業(yè)設計師和開(kāi)發(fā)商正在建立網(wǎng)站響應規模與一定的設備分辨率。我也有罪。三種**常見(jiàn)的設備當然是臺式電腦/筆記本電腦、iPad和iPhone移動(dòng)電話(huà)（或其他移動(dòng)設備）。作為設計教師，我們需要認識到，responsive設計是關(guān)于設計斷點(diǎn)和生產(chǎn)內容的可讀性和開(kāi)放性，而不僅僅是特定設備的用戶(hù)。

　　換句話(huà)說(shuō)，如果你是一個(gè)軟件程序的網(wǎng)站設計，有某種框架和斷點(diǎn)工作是很重要的。我建議你自己做。根據內容優(yōu)化布局。找到斷點(diǎn)的**佳方法是先繪制草圖線(xiàn)框圖，然后開(kāi)始開(kāi)發(fā)選擇像素的軟件。確保在同一網(wǎng)格線(xiàn)框圖設計上工作。如果你像我，那么你的代碼，你的線(xiàn)框圖和創(chuàng )建一個(gè)生活原型。這對我幫助很大，因為我可以使用我的響應工作流來(lái)創(chuàng )建流體模型，并將斷點(diǎn)設計添加為設計中斷完整像素PS圖象處理軟件。

　　對字體的響應設計我在許多網(wǎng)站響應中發(fā)現的**大問(wèn)題之一是，當設計工程師和開(kāi)發(fā)人員選擇在設計斷點(diǎn)處使用設備時(shí)，會(huì )拋出字體。在我看來(lái)，設計中的選擇設備完全忽略了您發(fā)布的內容和用戶(hù)消費的內容。內容應保持可讀，直到它被調整為保持可讀。內容永遠是王道，內容的易用性和可讀性應該是重中之重。我**喜歡的保持內容可讀性設計的方法之一是使用相對的字體大小單位，如EMS、填充和空間布局。響應型設計完全是平衡布局，在我看來(lái)，EMS是一個(gè)完美的組合。

　　EMS是擴展到父元素的字體大小的相對單位。他們可以節省你很多時(shí)間和麻煩。它們有助于保持整個(gè)布局結構。是不是說(shuō)你問(wèn)了什么 這意味著(zhù)隨著(zhù)基本字體大小的增加或減少，在均勻調整布局時(shí)沒(méi)有什么可避免的。

　　下面是一個(gè)例子。例如，我們發(fā)現了兩個(gè)斷點(diǎn)設計、一個(gè)非常大的桌面顯示器超分辨率和一個(gè)小平板電腦。我們還說(shuō)過(guò)，根據字體大小，16px等于1.0em，當網(wǎng)站被認為是分辨率為3840times時(shí)，我們將基本字體大小打到22px；2160（高分辨率），我們將基本字體大小減少到14像素，分辨率為800 x 600（小型筆記本/平板電腦）。我們已經(jīng)在兩個(gè)指定的斷點(diǎn)（一個(gè)大斷點(diǎn)和一個(gè)小斷點(diǎn)）極大地改變了網(wǎng)站布局的類(lèi)型和大小。在22px的基本字體大小分辨率中，1.4em heading表示1.4em等于30.8px，在較小的基本字體大小部分中，1.4em等于19.6px。盡管我們的字號要大得多3840times；2160我們不必擔心布局破壞，因為它也會(huì )調整。假設我們有一個(gè)50em包含元素的寬度，分辨率為800x600，將是700px，但是在3840x2160分辨率下，它將被創(chuàng )建。我們的填充物和邊緣將永久調整。將字體大小和布局設置為EMS允許我們以更大的分辨率設計縮放，以使內容更容易閱讀。

　　響應設計表示隱藏內容。Responsive設計旨在使您的內容在所有屏幕分辨率和設備上對所有人開(kāi)放，甚至對已禁用的人開(kāi)放。隱藏內容從來(lái)不是一個(gè)好主意，如果你想隱藏它，你不需要這樣開(kāi)始。隱藏內容使其不可讀屏幕閱讀器，現在您可以通過(guò)視覺(jué)或認知障礙訪(fǎng)問(wèn)您的內容。請記住，內容應該在所有設備上都是通用的，不要通過(guò)將用戶(hù)限制在單個(gè)設備視圖來(lái)懲罰他們。

　　也就是說(shuō)，我還發(fā)現了一些用法：無(wú)；它會(huì )派上用場(chǎng)的。幾乎所有的用例都處理一些導航，我使用display:none；導航元素以不同設備的形式變化。這并不是限制或隱藏不同設備上的內容的好方法，因為您很可能會(huì )讓一些用戶(hù)基于一個(gè)假設性的決定，這將帶來(lái)非常糟糕的體驗。

　　Responsive設計犧牲性能有一些網(wǎng)站，這是我**近看到的，顯示出對低帶寬用戶(hù)缺乏同情心。其中大多數網(wǎng)站都有相同的東西，很多圖像和很多JavaScript庫。如果設計有一個(gè)移動(dòng)方法，其中許多網(wǎng)站可能已經(jīng)過(guò)優(yōu)化。

　　因為有很多關(guān)于響應圖像的討論，所以很難為任何人提供任何解決方案。我理解這個(gè)困境，但等待一個(gè)完美的解決方案是所有瀏覽器和設備的標準，并不是你目前的網(wǎng)站更容易在有限帶寬的設備上使用。找到**能解決問(wèn)題的解決方案并運行它。未能找到解決方案意味著(zhù)人們的性能問(wèn)題，而完全失敗的響應設計是目標。

　　大型JavaScript庫也會(huì )在小型設備上造成問(wèn)題。嘗試根據屏幕分辨率或設備類(lèi)型找到一種稱(chēng)它們?yōu)闂l件的方法。性能不應該說(shuō)是被動(dòng)的設計作為事后考慮。

　　結論網(wǎng)絡(luò )爆炸了。有了移動(dòng)電話(huà)和智能手機技術(shù)，我們可以隨時(shí)隨地訪(fǎng)問(wèn)。為了確保我們能夠接觸到所有的用戶(hù)，在他們想要的時(shí)候給他們想要的東西是很重要的。響應設計是一項非常新的技術(shù)。在我看來(lái)，它是統一網(wǎng)絡(luò )內容的完美技術(shù)。

　　牧羊人設計

　　深圳旅游局2015手機網(wǎng)站設計深圳營(yíng)銷(xiāo)型網(wǎng)站建設瑞曼德科技網(wǎng)站設計

http://ezekroy.com/wangzhansheji/1176.html 關(guān)于響應設計的常見(jiàn)錯誤