你還在為標(biāo)準(zhǔn)屏幕分辨率(1024x768)開(kāi)發(fā)網(wǎng)站嗎?停止做它!它讓你在不斷發(fā)展的網(wǎng)絡(luò)世界中顯得很傻。

開(kāi)始使用移動(dòng)設(shè)備和平板電腦上網(wǎng)的人數(shù)每天都在增長(zhǎng)。iPhone、iPad、各種上網(wǎng)本、黑莓、Kindle……這些設(shè)備的清單幾乎是無(wú)止境的。此外，額外發(fā)明的數(shù)量在不斷增加。在這種情況下，我們面臨著一個(gè)嚴(yán)重的問(wèn)題——對(duì)于一臺(tái)寬屏電腦來(lái)說(shuō)，一個(gè)固定界面的設(shè)計(jì)，在現(xiàn)在看來(lái)并沒(méi)有多大意義。

同時(shí)，我們不能為每個(gè)現(xiàn)有的設(shè)備創(chuàng)建多個(gè)版本的網(wǎng)站。這絕對(duì)是不切實(shí)際的，幾乎是不可能完成的任務(wù)。技術(shù)發(fā)展如此之快，以至于在你注意到它之前，你就可以通過(guò)你的冰箱上網(wǎng)了:)

那么，解決這個(gè)問(wèn)題的方法是什么呢?它存在嗎?是的,確實(shí)。我們的問(wèn)題很容易通過(guò)響應(yīng)性的Web設(shè)計(jì)概念來(lái)解決，這是一種新的廣泛討論的Web設(shè)計(jì)趨勢(shì)。它是上面描述的問(wèn)題中最簡(jiǎn)單、最優(yōu)雅的解決方案。
響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)

響應(yīng)性的網(wǎng)頁(yè)設(shè)計(jì)就像一個(gè)新的閃亮的玩具給設(shè)計(jì)師和開(kāi)發(fā)者。響應(yīng)式設(shè)計(jì)的重要性很難被高估，因?yàn)樗ＷC了任何網(wǎng)站在不同的屏幕分辨率下看起來(lái)都很好。我想每個(gè)人都會(huì)同意我的觀點(diǎn)，每一個(gè)有自尊心的設(shè)計(jì)師，無(wú)論他們是否擁有網(wǎng)頁(yè)設(shè)計(jì)的學(xué)位，都是為了讓自己熟悉響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)。
它是通過(guò)將諸如柔性網(wǎng)格、流體圖像和媒體查詢等技術(shù)結(jié)合起來(lái)實(shí)現(xiàn)的。它有助于設(shè)計(jì)一個(gè)靈活的架構(gòu)，它將自動(dòng)適應(yīng)不同的條件，因此，將在每個(gè)屏幕分辨率上正確顯示。無(wú)論未來(lái)有多少新設(shè)備進(jìn)入我們的生活，響應(yīng)性的網(wǎng)站總是能夠提供合適的回應(yīng)。

訂閱我們的時(shí)事通訊，并獲得一本很酷的電子書，免費(fèi)的“免費(fèi)的HTML指南”。我們會(huì)在兩周內(nèi)給你發(fā)送有用的帖子和免費(fèi)贈(zèng)品。


得到我們的免費(fèi)電子書
初學(xué)者指南HTML

你的電子郵件在這里
下載
相關(guān)的帖子
為智能設(shè)計(jì)提供響應(yīng)性設(shè)計(jì)書籍。
40+最佳響應(yīng)設(shè)計(jì)教程。
如何創(chuàng)建響應(yīng)性的WordPress網(wǎng)頁(yè)設(shè)計(jì)?
如何創(chuàng)建一個(gè)靈活的網(wǎng)格?
使用一個(gè)靈活的網(wǎng)格，我們應(yīng)該忘記固定的寬度樣式和中心內(nèi)容。這意味著我們?cè)O(shè)計(jì)的所有元素都是相互關(guān)聯(lián)的。流體網(wǎng)格的基本思想是用這個(gè)公式計(jì)算比例的設(shè)計(jì)百分比:“目標(biāo)/環(huán)境=結(jié)果”

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

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

同樣的公式適用于類型。我們不再使用基于像素的大小，而是使用em或百分比。例子:
14像素-正文字體大小;
21像素- H1字體大小;
21⁄14 = 1.5
你的CSS會(huì)是:

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

首先，您應(yīng)該學(xué)習(xí)如何手工制作一個(gè)靈活的網(wǎng)格。但是你可以使用一些有用的工具包，這會(huì)節(jié)省你的時(shí)間。您還可以在這里找到更多關(guān)于靈活網(wǎng)格的信息:

移動(dòng)響應(yīng)式設(shè)計(jì):柔性網(wǎng)格。

流體網(wǎng)格，定向和分辨率獨(dú)立。

流體網(wǎng)格和響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。

流體圖像

流體圖像的使用會(huì)導(dǎo)致大小調(diào)整到父塊。主要思想是在不明顯地使用{max-width: 100%}的屬性。具有img {max-width: 100%}的圖像永遠(yuǎn)不會(huì)從父單元中出來(lái)。如果母塊小于img的大小，則圖像按比例縮小。這一原則適用于圖像、物體和視頻。
響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)

一些有用的資源:

隱藏和揭示圖像的部分。

流體圖像

前景圖像，規(guī)模與布局。

在響應(yīng)式Web設(shè)計(jì)中以垂直為中心的溢出圖像。

關(guān)于媒體查詢的基本知識(shí)。
需要媒體查詢，以顯示優(yōu)化的布局，以實(shí)現(xiàn)非常分辨率，從那時(shí)起，站點(diǎn)就被瀏覽了。它是CSS標(biāo)準(zhǔn)的一部分，它允許您根據(jù)有關(guān)設(shè)備解析的信息應(yīng)用樣式。

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

最普遍的像素寬度是:320px(iPhone肖像，默認(rèn))，480px (iPhone景觀)，600px, 768px(iPad肖像)，900px, 1024px (iPad景觀)。我強(qiáng)烈建議您考慮所有這些屏幕分辨率，如果您想讓您的設(shè)計(jì)響應(yīng)一個(gè)。
看看這些有用的資源:

與媒體合作的查詢

如何使用CSS3定向媒體查詢?

具有媒體查詢的自適應(yīng)布局。

CSS3媒體查詢的W3C規(guī)范。

移動(dòng)優(yōu)先原則。
在很長(zhǎng)一段時(shí)間里，所有的網(wǎng)站都是專為臺(tái)式機(jī)設(shè)計(jì)的，而在移動(dòng)電話上瀏覽網(wǎng)頁(yè)的過(guò)程是很痛苦的。但技術(shù)正在改變，移動(dòng)f的原則也在改變。 本文來(lái)源：杰云網(wǎng)絡(luò)，轉(zhuǎn)載請(qǐng)注明出處！如果需要 營(yíng)銷型網(wǎng)站建設(shè)、 微商城、 小程序商城、 多端小程序 請(qǐng)聯(lián)系我們！