你可以輕易找到許多如何設(shè)置響應式設(shè)計響應點的攻略，但是這些過時的設(shè)計方法都是以主流屏幕尺寸為依據(jù)的，效果并不理想。其實并沒有“主流”屏幕尺寸這一概念。另外一個主流的方法是當布局被打破時設(shè)置響應點。這個方法聽起來好一些。但是仍有疑問，我們怎么判斷是否布局被打破了呢?其中一個合理回答是依照經(jīng)典可讀性理論定義響應點。

　　名人的看法

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

　　多種因素決定理想尺寸

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

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

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

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

　　實例說明

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

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

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

　　合理響應點

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

　　小屏

　　我先從小屏幕開始。Oliver Reichenstein定理，是我非常喜歡的一個理論，它的字體設(shè)置不以屏幕尺寸為依據(jù)，它依據(jù)的是人眼和設(shè)備之間的距離。我們傾向于把手機拿的比電腦更靠近頭一點，所以需要小一點的字體。另外一個Robert Bringhurst定理，就像上面闡述的，理想尺寸不應該小于45個字符。在我們的例子中，可以使用16px字號的Georgia字體作為默認字體，這會讓字看起來稍微小點。兩種理論都很好，它們都告訴我們在小屏上要減小字號。所以，我們在小屏手機上需要寫的代碼如下：

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

　　大屏

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

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

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

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

　　更大屏

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

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

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

　　現(xiàn)在創(chuàng)新互聯(lián)就有一個響應式設(shè)計的網(wǎng)站了，基于文字大小和屏幕尺寸的。響應點是基于邏輯運算而不是隨機因素如當下流行的設(shè)備屏幕尺寸等。這個設(shè)計對于未來的修改和瀏覽器用戶都有好處。因為所有元素大小都是基于文字大小來設(shè)置的，完全能迎合訪問你網(wǎng)站的用戶的設(shè)置喜好。當文字大小變換時布局也不會被破壞。

　　技術(shù)方面

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

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

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

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

　　這就意味著只有當某個特定的元素在小尺寸屏幕上顯示有差異時，我們才使用媒體查詢。這樣想想你就會發(fā)現(xiàn)這種情況有很多：頁頭、導航以及其他復雜的元素在小尺寸屏幕上常常是根本不一樣的。像我舉的例子一樣，把這些元素的代碼放在一個媒體查詢里是正確的，因為它相對于默認設(shè)置來說是個例外。

　　細節(jié)方面

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

　　響應點范圍

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

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

　　媒體查詢中的長度單位ems

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

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

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

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

　　總結(jié)

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

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

網(wǎng)站標題：合理設(shè)置響應式設(shè)計的響應點
瀏覽路徑：http://www.rwnh.cn/news/166334.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、建站公司、移動網(wǎng)站建設(shè)、做網(wǎng)站、商城網(wǎng)站、搜索引擎優(yōu)化

廣告

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