合理設(shè)置響應(yīng)式設(shè)計(jì)的響應(yīng)點(diǎn)

你可以輕易找到許多如何設(shè)置響應(yīng)式設(shè)計(jì)響應(yīng)點(diǎn)的攻略，但是這些過(guò)時(shí)的設(shè)計(jì)方法都是以主流屏幕尺寸為依據(jù)的，效果并不理想。其實(shí)并沒(méi)有“主流”屏幕尺寸這一概念。另外一個(gè)主流的方法是當(dāng)布局被打破時(shí)設(shè)置響應(yīng)點(diǎn)。這個(gè)方法聽(tīng)起來(lái)好一些。但是仍有疑問(wèn)，我們?cè)趺磁袛嗍欠癫季直淮蚱屏四?其中一個(gè)合理回答是依照經(jīng)典可讀性理論定義響應(yīng)點(diǎn)。

　　名人的看法

　　Robert Bringhurst認(rèn)為，單列頁(yè)面里的內(nèi)容被設(shè)置為普通有襯線字體和普通字體大小時(shí)，排列45至75個(gè)字符長(zhǎng)度為。Josef Müller-Brockmann認(rèn)為，一行如果能容納10個(gè)單詞那么這欄就很容易閱讀。有許多原因會(huì)影響實(shí)際的字符數(shù)或單詞數(shù)，但這是一種基本理論。如果你從小屏幕開(kāi)始，然后你逐漸增大，主要內(nèi)容的寬度也可能會(huì)變得比75個(gè)字符或者10個(gè)單詞更寬，一些改變就會(huì)發(fā)生了。簡(jiǎn)單的說(shuō)，這些就是你的響應(yīng)點(diǎn)。

　　多種因素決定理想尺寸

　　許多因素決定了理想尺寸的大小。比如，德語(yǔ)的長(zhǎng)度比英語(yǔ)長(zhǎng)，那就需要更寬的位置了。你理解對(duì)了：對(duì)于需要多種語(yǔ)言的國(guó)際網(wǎng)站你必須有不同的柵格。字體、字號(hào)、背景對(duì)比度、行距、字間距、文字類型等等這些因素都會(huì)影響一行文字的長(zhǎng)度。

　　設(shè)計(jì)師的自我見(jiàn)識(shí)和經(jīng)驗(yàn)對(duì)于尺寸的判斷影響很大。你可能很容易就判斷出75到90個(gè)字符的長(zhǎng)度是最理想的。但是我不是設(shè)計(jì)師，也不是排版家，所以我只能根據(jù)書(shū)上的理論知識(shí)來(lái)判斷。當(dāng)然了，知道自己在干啥的這類人，完全可以自己構(gòu)想一下所謂理論。

　　我制作了這個(gè)國(guó)際尺寸滑動(dòng)器，讓你了解一小節(jié)是多寬。這個(gè)小工具看起來(lái)只是在變化語(yǔ)音和字體，但是你會(huì)發(fā)現(xiàn)這兩個(gè)變化值分別能帶來(lái)極端的效果。只是拿德語(yǔ)或波蘭語(yǔ)同英語(yǔ)比較，或者更詳細(xì)點(diǎn)，德語(yǔ)設(shè)置為Verdana字體與英語(yǔ)設(shè)置為Georgia比較。差異十分巨大：10個(gè)設(shè)為Verdana的德語(yǔ)單詞寬38.5ems，但是10個(gè)設(shè)置為Georgia的英語(yǔ)單詞才寬22ems。在許多默認(rèn)瀏覽器的設(shè)置里，這將會(huì)是616px對(duì)352px的差距。你可以看到兩個(gè)簡(jiǎn)單的因素對(duì)柵格的巨大影響。

　　合理的尺寸對(duì)于一篇文章來(lái)說(shuō)十分重要。我知道網(wǎng)絡(luò)也并非只有文章。你也可以很順暢的使用只有很少文字說(shuō)明的網(wǎng)絡(luò)應(yīng)用。但是確定響應(yīng)點(diǎn)的時(shí)候首先考慮尺寸也是非常好的做法。

　　實(shí)例說(shuō)明

　　因?yàn)橹皇且粋€(gè)例子，所以我用的是一個(gè)簡(jiǎn)單的博文。它是一篇結(jié)構(gòu)清晰但內(nèi)容簡(jiǎn)單的文章，包含一些常見(jiàn)的語(yǔ)義元素。這些元素不足以確定響應(yīng)點(diǎn)，但是會(huì)給我們一些幫助。排版是一個(gè)合理的出發(fā)點(diǎn)。我忽略了頭部和logo，只先集中在內(nèi)容上。

　　當(dāng)然，如果你在瀏覽器里打開(kāi)這篇沒(méi)有樣式的文章，會(huì)覺(jué)得它非常丑。它沒(méi)有任何樣式除了瀏覽器默認(rèn)自帶的那些樣式。文章和瀏覽器窗口一樣寬，在桌面瀏覽器上看時(shí)覺(jué)得太寬了點(diǎn)。這就像大家在IE6上看到的網(wǎng)頁(yè)的感覺(jué)一樣——很容易看懂但是樣式糟糕。

　　添加一些基本的排版樣式和max-width屬性之后，這篇文章馬上看起來(lái)好多了。這個(gè)頁(yè)面現(xiàn)在可以當(dāng)作定義不同響應(yīng)式柵格的出發(fā)點(diǎn)了。這個(gè)單列排版在小屏上可能需要調(diào)整，在大屏上時(shí)需要增加一些列，不管是為了讓排版更美觀，還是展示更多信息，比如導(dǎo)航或者側(cè)邊欄。

　　合理響應(yīng)點(diǎn)

　　我在高中畢業(yè)前從來(lái)沒(méi)用心學(xué)過(guò)數(shù)學(xué)，所以我使用了一個(gè)很簡(jiǎn)單的柵格。聰明人可以借用相同的思想但是使用更復(fù)雜的柵格系統(tǒng)。這章主要是定義響應(yīng)點(diǎn);所以怎么設(shè)置全由你自己決定。

　　小屏

　　我先從小屏幕開(kāi)始。Oliver Reichenstein定理，是我非常喜歡的一個(gè)理論，它的字體設(shè)置不以屏幕尺寸為依據(jù)，它依據(jù)的是人眼和設(shè)備之間的距離。我們傾向于把手機(jī)拿的比電腦更靠近頭一點(diǎn)，所以需要小一點(diǎn)的字體。另外一個(gè)Robert Bringhurst定理，就像上面闡述的，理想尺寸不應(yīng)該小于45個(gè)字符。在我們的例子中，可以使用16px字號(hào)的Georgia字體作為默認(rèn)字體，這會(huì)讓字看起來(lái)稍微小點(diǎn)。兩種理論都很好，它們都告訴我們?cè)谛∑辽弦獪p小字號(hào)。所以，我們?cè)谛∑潦謾C(jī)上需要寫(xiě)的代碼如下：

　　這說(shuō)明當(dāng)尺寸小于45個(gè)字符時(shí)，使用小字號(hào)。我也減少了頁(yè)面兩邊的內(nèi)邊距使主體內(nèi)容有更多空間顯示。看看下面的例子。

　　大屏

　　有時(shí)單列就足夠了。內(nèi)容主導(dǎo)型的網(wǎng)站比如博客，單列是最理想的布局。但是多列布局在很多情形下在大屏上顯示效果會(huì)很好。有時(shí)你可能想顯示導(dǎo)航，或者一些有用的小插件。你肯定會(huì)想把這些東西放在內(nèi)容區(qū)旁邊。

　　我們也可以自己做一些事情。如果正好這里有空間可以額外放一個(gè)欄目，我們可以自己設(shè)計(jì)我們的文章布局。我在左邊增加一個(gè)寬度為33%的欄目，標(biāo)題和文章的第一段占滿這個(gè)區(qū)域。其他元素如引文和圖片也能填在這個(gè)區(qū)域。

　　這里的代碼就有點(diǎn)復(fù)雜了。這么寫(xiě)結(jié)構(gòu)不是唯一的或者說(shuō)最主流的方法。但是我是這么做的。

　　當(dāng)屏幕寬度超過(guò)34ems時(shí)(內(nèi)容寬30ems，外邊距寬4ems)，頁(yè)面大寬度為51ems：34+(34÷2)?，F(xiàn)在文章占整個(gè)寬度的2/3，左邊新欄的寬度是1/3。在它右邊的h1和p元素內(nèi)容應(yīng)該設(shè)置一個(gè)負(fù)的外邊距值，值為內(nèi)容寬度的50%。這就是為什么我一直怪自己沒(méi)有好好學(xué)習(xí)數(shù)學(xué)了!

　　更大屏

　　我們可以加個(gè)第三欄，第四欄，第五欄。這取決于我們的內(nèi)容。我們可以利用相應(yīng)空間展示一些圖片和相關(guān)內(nèi)容。這完全取決于你自己的設(shè)計(jì)。在我的示例中，我們可以把腳注放在內(nèi)容的右邊。別笑話我了~我又不是視覺(jué)設(shè)計(jì)師，就這么排版吧。看看代碼吧：

　　現(xiàn)在文章寬50%，左右兩邊的外邊距寬25%。邊腳注向右偏移了50%的距離。腳注寬為50%減去2em，看起來(lái)會(huì)更好些。p和h1標(biāo)簽的代碼不變。注意calc這個(gè)屬性不是所有瀏覽器都支持，所以我們得留點(diǎn)后路。所以代碼如下：

　　我也知道不是所有前綴都有用，但是我建議全部寫(xiě)上。如果你不想這么做，建議你記住哪個(gè)瀏覽器支持什么CSS屬性，是否需要帶前綴。如果能正確理解層級(jí)關(guān)系，是非常有用的。當(dāng)然，它得排的好看。我能清楚看到我的樣式表是怎么生成出漂亮的樣式的。

　　現(xiàn)在創(chuàng)新互聯(lián)就有一個(gè)響應(yīng)式設(shè)計(jì)的網(wǎng)站了，基于文字大小和屏幕尺寸的。響應(yīng)點(diǎn)是基于邏輯運(yùn)算而不是隨機(jī)因素如當(dāng)下流行的設(shè)備屏幕尺寸等。這個(gè)設(shè)計(jì)對(duì)于未來(lái)的修改和瀏覽器用戶都有好處。因?yàn)樗性卮笮《际腔谖淖执笮?lái)設(shè)置的，完全能迎合訪問(wèn)你網(wǎng)站的用戶的設(shè)置喜好。當(dāng)文字大小變換時(shí)布局也不會(huì)被破壞。

　　技術(shù)方面

　　當(dāng)我們幾年前開(kāi)始做響應(yīng)式設(shè)計(jì)時(shí)，我們會(huì)先創(chuàng)建一個(gè)pc網(wǎng)站，然后增加媒體查詢?yōu)樾〕叽缙聊桓膶?xiě)樣式。我們發(fā)現(xiàn)這種做法并不正確?，F(xiàn)在我們都知道創(chuàng)建CSS最好是先從小尺寸屏幕開(kāi)始。畢竟變大是容易的——樹(shù)會(huì)生長(zhǎng)，嬰兒會(huì)長(zhǎng)大——縮減很困難。有沒(méi)有試過(guò)精簡(jiǎn)一輛汽車?一定程度是可能的，但還是很辛苦。

　　在大多數(shù)情況下，從小尺寸屏幕做起是合乎邏輯的。當(dāng)要把東西做的更大時(shí)，我們只需要為大尺寸屏幕添加一些媒體查詢?nèi)缓笳{(diào)整布局就可以了。但我認(rèn)為這并不是真的指小屏幕，而說(shuō)的是默認(rèn)狀態(tài)。

　　優(yōu)先默認(rèn)設(shè)置

　　我們需要確認(rèn)的第一件事不一定是小尺寸屏幕的樣式，而是默認(rèn)設(shè)置：各個(gè)地方瀏覽網(wǎng)站時(shí)的樣式，無(wú)論屏幕大小。這些樣式包括字號(hào)、留白、品牌風(fēng)格如邊框和背景之間的關(guān)系。由于這些樣式是每個(gè)終端都會(huì)用到，則不應(yīng)該放在媒體查詢里。需要在媒體查詢里定義的內(nèi)容應(yīng)該是在基礎(chǔ)樣式上的一些例外(比如更小號(hào)的字體)或是補(bǔ)充(比如柵格)。

　　這就意味著只有當(dāng)某個(gè)特定的元素在小尺寸屏幕上顯示有差異時(shí)，我們才使用媒體查詢。這樣想想你就會(huì)發(fā)現(xiàn)這種情況有很多：頁(yè)頭、導(dǎo)航以及其他復(fù)雜的元素在小尺寸屏幕上常常是根本不一樣的。像我舉的例子一樣，把這些元素的代碼放在一個(gè)媒體查詢里是正確的，因?yàn)樗鄬?duì)于默認(rèn)設(shè)置來(lái)說(shuō)是個(gè)例外。

　　細(xì)節(jié)方面

　　上面的例子是很基本的，我也沒(méi)有說(shuō)明太多細(xì)節(jié)。有兩點(diǎn)是至關(guān)重要的，所以我在這里加上。一個(gè)是關(guān)于媒體查詢中的長(zhǎng)度單位ems，另一個(gè)則是響應(yīng)點(diǎn)。

　　響應(yīng)點(diǎn)范圍

　　最近關(guān)于術(shù)語(yǔ)“響應(yīng)點(diǎn)”的已經(jīng)有一些討論。Mark Boulton和Ben Callahan認(rèn)為我們應(yīng)該稱呼它為“優(yōu)化點(diǎn)”，而Jeremy Keith則在響應(yīng)點(diǎn)和“調(diào)整點(diǎn)”之間猶豫不決。本章節(jié)內(nèi)，我會(huì)聚焦在響應(yīng)點(diǎn)上——也就是當(dāng)內(nèi)容需要更多或更少的展示空間時(shí)布局所發(fā)生的變化?，F(xiàn)在我來(lái)介紹另一個(gè)術(shù)語(yǔ)：響應(yīng)點(diǎn)范圍。

　　我們稱呼那些改變布局的媒體查詢?yōu)椤绊憫?yīng)點(diǎn)”。我們傾向于把這些響應(yīng)點(diǎn)作為直接的變化：當(dāng)一個(gè)布局達(dá)到它的大寬度時(shí)，我們立刻轉(zhuǎn)換到下一個(gè)布局顯示。轉(zhuǎn)換之前先保持上一個(gè)布局并增加一些留白，這樣的做法更好些。例如，一欄和兩欄布局之間的轉(zhuǎn)換會(huì)導(dǎo)致顯示一個(gè)非常小的主欄。就像我之前說(shuō)的，我們可以讓它保持一小會(huì)，而不是在內(nèi)容達(dá)到它的大寬度的瞬間就立刻轉(zhuǎn)換。這是絕對(duì)不會(huì)破壞布局的一個(gè)非常簡(jiǎn)單的絕招。

　　媒體查詢中的長(zhǎng)度單位ems

　　在媒體查詢里使用ems單位是很奇怪的一件事。你可能會(huì)認(rèn)為它們應(yīng)該是響應(yīng)CSS中指定的字號(hào)的，但事實(shí)并非如此。它們會(huì)響應(yīng)訪問(wèn)者使用的瀏覽器的字號(hào)。你仔細(xì)想想就會(huì)覺(jué)著這也是一件合理的事情。如果他們響應(yīng)CSS里的字號(hào)，你可以禁用增加字號(hào)的媒體查詢。這段代碼可能會(huì)陷入死循環(huán)：

　　如果媒體查詢響應(yīng)這個(gè)樣式表中定義的字號(hào)，那么當(dāng)我們慢慢的增加瀏覽器寬度的時(shí)候會(huì)怎么樣呢?只要屏幕顯示的寬度超過(guò)20ems，字體會(huì)立刻放大兩倍。這就意味著頁(yè)面寬度現(xiàn)在是10ems，而瀏覽器則應(yīng)該忽略這個(gè)媒體查詢。這會(huì)導(dǎo)致這個(gè)較小的字號(hào)會(huì)立刻再次觸發(fā)這個(gè)媒體查詢。這會(huì)陷入死循環(huán)。

　　這種做法不僅僅從技術(shù)角度來(lái)看是合理的，從用戶的角度來(lái)看同樣是合理的：如果用戶想要更大一點(diǎn)的字號(hào)，那么布局就應(yīng)該以響應(yīng)字號(hào)的方式來(lái)優(yōu)化。這也正是我們一直在做的事情。與此同時(shí)，對(duì)于像我這樣的人來(lái)說(shuō)真是一個(gè)相當(dāng)大的麻煩事，我們?cè)诟咧芯蛻?yīng)該已經(jīng)注意到：媒體查詢中設(shè)置條件用到的ems應(yīng)該用與代碼里面使用的的完全不同大小。這真是太復(fù)雜了。如果你想要了解更多，絕對(duì)要去讀Lyza Gardner關(guān)于這個(gè)主題的經(jīng)典文章，“ems單位的巨大作用：讓媒體查詢比例化!”

　　真正困擾我的事情是，我們需要一個(gè)傻瓜式的工具來(lái)估算一行當(dāng)中的字符數(shù)。Webkit目前才實(shí)現(xiàn)把“字符ch”加入構(gòu)建日程中;我們想要自如的使用可能還需要一段時(shí)間。一個(gè)字符實(shí)際上就是使用字體中0的寬度。這聽(tīng)起來(lái)是一個(gè)非常有用的響應(yīng)式設(shè)計(jì)，但我并不確定在媒體查詢中將會(huì)如何運(yùn)作。我們拭目以待。

　　總結(jié)

　　理想情況下，針對(duì)各種屏幕尺寸的不同布局應(yīng)該根據(jù)內(nèi)容單獨(dú)定義。當(dāng)然也會(huì)有一些情況是頁(yè)面中其他的元素，比如banner，會(huì)直接定義內(nèi)容的寬度。就算在這樣的情況下，易讀性理論會(huì)有所幫助;你可以為了讓頁(yè)面保持在一個(gè)好行寬的邊界里而去增減字號(hào)。只是不要把文字弄太小就好了——畢竟人們還是想要閱讀它們的。

　　幸運(yùn)的是在大部分情況下，傳統(tǒng)的排版理論就可以助你決定響應(yīng)式站點(diǎn)的正確響應(yīng)點(diǎn)。你甚至可以根據(jù)不同的語(yǔ)言來(lái)創(chuàng)建不同的布局。當(dāng)你在做一個(gè)大型的國(guó)際型站點(diǎn)時(shí)，這可能是個(gè)好想法。最最重要的是，不論是現(xiàn)在還是將來(lái)，運(yùn)用本章節(jié)的理論來(lái)針對(duì)各種不同的屏幕尺寸更好的設(shè)計(jì)你的網(wǎng)站。我列舉的案例用的是一個(gè)非常簡(jiǎn)單的柵格，不過(guò)結(jié)合更多復(fù)雜的柵格之后，本理論可以幫助創(chuàng)造更合理、精彩的網(wǎng)站。

網(wǎng)頁(yè)標(biāo)題：合理設(shè)置響應(yīng)式設(shè)計(jì)的響應(yīng)點(diǎn)
本文網(wǎng)址：http://www.bm7419.com/news34/166334.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、全網(wǎng)營(yíng)銷推廣、域名注冊(cè)、Google、搜索引擎優(yōu)化、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)