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

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

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

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

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

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

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

　　換句話說，如果你是一個(gè)軟件程序的網(wǎng)站設(shè)計(jì)，有某種框架和斷點(diǎn)工作是很重要的。我建議你自己做。根據(jù)內(nèi)容優(yōu)化布局。找到斷點(diǎn)的**佳方法是先繪制草圖線框圖，然后開始開發(fā)選擇像素的軟件。確保在同一網(wǎng)格線框圖設(shè)計(jì)上工作。如果你像我，那么你的代碼，你的線框圖和創(chuàng)建一個(gè)生活原型。這對(duì)我?guī)椭艽螅驗(yàn)槲铱梢允褂梦业捻憫?yīng)工作流來創(chuàng)建流體模型，并將斷點(diǎn)設(shè)計(jì)添加為設(shè)計(jì)中斷完整像素PS圖象處理軟件。

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

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

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

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

　　也就是說，我還發(fā)現(xiàn)了一些用法：無；它會(huì)派上用場(chǎng)的。幾乎所有的用例都處理一些導(dǎo)航，我使用display:none；導(dǎo)航元素以不同設(shè)備的形式變化。這并不是限制或隱藏不同設(shè)備上的內(nèi)容的好方法，因?yàn)槟芸赡軙?huì)讓一些用戶基于一個(gè)假設(shè)性的決定，這將帶來非常糟糕的體驗(yàn)。

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

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

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

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

　　牧羊人設(shè)計(jì)

　　深圳旅游局2015手機(jī)網(wǎng)站設(shè)計(jì)深圳營銷型網(wǎng)站建設(shè)瑞曼德科技網(wǎng)站設(shè)計(jì)

http://ywxrmy.cn/wangzhansheji/1176.html 關(guān)于響應(yīng)設(shè)計(jì)的常見錯(cuò)誤