亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

寫(xiě)在前面

近年來(lái)，隨著科學(xué)技術(shù)的發(fā)展，終端的分辨率越來(lái)越多，響應(yīng)式的設(shè)計(jì)氤氳而生。然而，作為設(shè)計(jì)師，你是否遇到過(guò)這樣的情況：當(dāng)你設(shè)計(jì)響應(yīng)式網(wǎng)站的時(shí)候，由于不了解其規(guī)范及實(shí)現(xiàn)原理，而根據(jù)自己的理解設(shè)計(jì)出了一套設(shè)計(jì)稿。然而，當(dāng)這份設(shè)計(jì)稿放到開(kāi)發(fā)面前時(shí)，卻發(fā)現(xiàn)很多你考慮得很美好的設(shè)計(jì)方案難以被開(kāi)發(fā)，最終無(wú)法還原設(shè)計(jì)稿的效果。

本文圍繞響應(yīng)式的設(shè)計(jì)方法來(lái)寫(xiě)，重點(diǎn)簡(jiǎn)述流式網(wǎng)格、元素切換、響應(yīng)式樣式?？赐瓯疚?，有助于你設(shè)計(jì)出兼容性更強(qiáng)，對(duì)開(kāi)發(fā)友好的響應(yīng)式設(shè)計(jì)。對(duì)縮短項(xiàng)目的開(kāi)發(fā)周期，降低項(xiàng)目的開(kāi)發(fā)、維護(hù)成本，推動(dòng)項(xiàng)目落地有一定的幫助。

首先，我們先來(lái)了解幾個(gè)概念。這幾個(gè)概念有涉及到設(shè)計(jì)，也有涉及到開(kāi)發(fā)。當(dāng)然，我們的目的不是學(xué)習(xí)開(kāi)發(fā)技術(shù)，而是通過(guò)對(duì)這些概念的了解，更好的掌握響應(yīng)式設(shè)計(jì)的方法。

1. 響應(yīng)式布局

響應(yīng)式布局是Ethan Marcotte在2010年提出的概念。他認(rèn)為，一個(gè)網(wǎng)站能夠兼容多個(gè)終端(指不同分辨率，不同Dpi的顯示設(shè)備)，而不是為每一個(gè)終端做一個(gè)特定的版本，這樣的網(wǎng)站布局方式即稱為響應(yīng)式布局。

由于科技的迅速發(fā)展，終端設(shè)備的分辨率越來(lái)越多樣化，響應(yīng)式布局正是為此而生，其目的是確保一個(gè)頁(yè)面在所有終端上都能呈現(xiàn)出令人滿意的效果。

響應(yīng)式布局結(jié)合多種布局方式，從而確保一個(gè)頁(yè)面能夠適應(yīng)不同終端的顯示。

常見(jiàn)的動(dòng)態(tài)布局方式：

（1）自適應(yīng)布局是指當(dāng)視口分辨率改變時(shí)，頁(yè)面的元素位置會(huì)自動(dòng)調(diào)整以適應(yīng)視口的布局方式。

（2）流式布局是指當(dāng)視口分辨率改變時(shí)，頁(yè)面元素的寬度根據(jù)百分比壓縮，而高度自動(dòng)調(diào)整的布局方式。

（3）彈性布局是指當(dāng)視口分辨率改變時(shí)，頁(yè)面元素按比例縮放從而適應(yīng)視口的布局方式。

（4）響應(yīng)式布局綜合了多種動(dòng)態(tài)布局，使得頁(yè)面在不同分辨率的視口可以呈現(xiàn)出不同的布局。

2. 媒體查詢

媒體查詢這個(gè)詞，對(duì)于設(shè)計(jì)師來(lái)說(shuō)應(yīng)該是非常陌生的。不過(guò)如果你是需要編寫(xiě)web靜態(tài)頁(yè)面的網(wǎng)頁(yè)設(shè)計(jì)師的話，應(yīng)該對(duì)此有所了解。

媒體查詢是CSS3(Cascading Style Sheet：層疊樣式表)新增的特性。媒體查詢使得樣式表可以根據(jù)不同的媒體、不同的視口尺寸定義不同的樣式。這種新特性對(duì)于設(shè)計(jì)響應(yīng)式頁(yè)面是非常有意義的。

舉個(gè)例子，我們想要設(shè)計(jì)一個(gè)這樣的卡片：當(dāng)它在PC端時(shí)，顯示為一張漂浮著的卡片，而在移動(dòng)端需要讓它顯示為橫向鋪滿的通欄。

那么，媒體查詢實(shí)現(xiàn)方式及效果如下：

如圖所示，開(kāi)發(fā)只需要先編寫(xiě)號(hào)移動(dòng)端的樣式，然后在樣式表中加入寬度大于768px的設(shè)備的樣式表，即可實(shí)現(xiàn)一套前端代碼顯示不同的樣式，而無(wú)需為移動(dòng)端專門(mén)編寫(xiě)一個(gè)html元素或者重新制作一個(gè)前端頁(yè)面。

看到這里，或許有人會(huì)疑惑，如果是768px以下的寬度才會(huì)顯示移動(dòng)端的樣式，那么有的大屏手機(jī)寬度分辨率超多768px了，那不是和一般的樣式?jīng)_突了嗎？

其實(shí)，這個(gè)問(wèn)題作為設(shè)計(jì)師并不需要考慮，CSS3里面已經(jīng)給我們解決了，前端工程師只需要在head標(biāo)簽中加入

<meta name="viewport" content="width=device-width, maximum-scale=1">

這一句html代碼就可以了。

這句代碼其實(shí)就是規(guī)定了設(shè)備屏幕的寬度按照dp(ios使用pt)來(lái)取值。

舉個(gè)例子，我們?cè)O(shè)計(jì)師經(jīng)常用來(lái)做移動(dòng)端設(shè)計(jì)尺寸的iphone6的屏幕分辨率為750x1334。邏輯分辨率Pt=375x667，也就是說(shuō)iphone6的瀏覽器會(huì)把屏幕當(dāng)做375px的寬度來(lái)顯示。

3. Bootstrap

Bootstrap是目前世界上受眾最廣的web前端框架，集合了世界上許多前端工程師的心血和經(jīng)驗(yàn)，非常適用于響應(yīng)式和移動(dòng)設(shè)備的開(kāi)發(fā)。學(xué)習(xí)Bootstrap，有助于深入了解響應(yīng)式的實(shí)現(xiàn)原理和應(yīng)用方式。

4. 網(wǎng)格系統(tǒng)(Grid System)

這里說(shuō)的網(wǎng)格系統(tǒng)當(dāng)然不是排版布局中用到的柵格網(wǎng)格，而是響應(yīng)式布局中用來(lái)控制列寬和列數(shù)的流式網(wǎng)格系統(tǒng)，其特點(diǎn)是隨著視口尺寸的變化，網(wǎng)格的列寬和列數(shù)會(huì)有不同變化，以適應(yīng)不同尺寸的視口。

本文以Bootstrap的網(wǎng)格系統(tǒng)為例，講解響應(yīng)式布局中網(wǎng)格設(shè)計(jì)的規(guī)范。

一、布局容器

布局容器可以理解為主視圖區(qū)域，見(jiàn)下圖：

傳統(tǒng)的靜態(tài)布局頁(yè)面一般會(huì)采用1000px、1100px 或 1200px等寬度作為容器寬度進(jìn)行設(shè)計(jì)。

在響應(yīng)式布局中，一般有兩種容器類型：響應(yīng)式固定寬度容器和全屏寬度容器。

（1）響應(yīng)式的固定寬度容器：

響應(yīng)式布局中，由于需要兼容不同寬度的視口，容器顯然不能采用固定的尺寸作為寬度。所以，響應(yīng)式布局所采用的固定寬度容器會(huì)根據(jù)視口的尺寸而進(jìn)行調(diào)整，常用的規(guī)范如下：

（2）全屏寬度容器：

顧名思義，全屏寬度容器就是我們用來(lái)設(shè)計(jì)全屏網(wǎng)站所采用的容器尺寸，它在任何時(shí)候，容器寬度都為100%

二、網(wǎng)格系統(tǒng)

1. 從bootstrap的網(wǎng)格系統(tǒng)開(kāi)始

網(wǎng)格系統(tǒng)是響應(yīng)式設(shè)計(jì)的核心，通過(guò)對(duì)界面元素定義不同分辨率下的網(wǎng)格列數(shù)，可以實(shí)現(xiàn)元素的響應(yīng)式。

網(wǎng)格常見(jiàn)的有12列、16列、24列，之所以采用這樣的數(shù)字，是因?yàn)椋@樣的網(wǎng)格可以很好的根據(jù)需要均分出1列、2列、3列、4列……等適用于多種情況的網(wǎng)格。

12列可分成：1列、2列、3列、4列、6列、12列。

16列可分成：1列、2列、4列、8列、16列。

24列……

以bootstrap為例，它使用的是12列網(wǎng)格系統(tǒng)，并且支持嵌套(嵌套后面再講)。

我們通過(guò)例子來(lái)講使用網(wǎng)格設(shè)計(jì)響應(yīng)式布局的方法。

假設(shè)我們要設(shè)計(jì)一個(gè)圖文列表頁(yè)，例如站酷首頁(yè)、Dribbble首頁(yè)這樣的。同時(shí)，我們想要做到更好的自適應(yīng)：1200px以上的視口，顯示六列。992px - 1200px的視口，顯示3列。

768px - 992px 的視口，顯示兩列。而小于768px的視口，則顯示1列(類似于站酷APP)。

利用，網(wǎng)格系統(tǒng)，我們可以這樣設(shè)計(jì)：

這樣的響應(yīng)式設(shè)計(jì)，對(duì)于掌握響應(yīng)式框架、懂得網(wǎng)格系統(tǒng)的開(kāi)發(fā)人員來(lái)說(shuō)，只需要非常少量的代碼就可以搞定。

當(dāng)然，網(wǎng)格系統(tǒng)的應(yīng)用場(chǎng)景不單單是等列寬列表，它幾乎可以用在一切布局上。

比如，不對(duì)等的布局：

再比如只占據(jù)一半內(nèi)容的布局：

1. 網(wǎng)格嵌套

首先看下面的例子：

從上面例子中應(yīng)該容易理解嵌套。

網(wǎng)格嵌套就是指一個(gè)網(wǎng)格系統(tǒng)中可以再嵌套一個(gè)網(wǎng)格系統(tǒng)，嵌套的網(wǎng)格系統(tǒng)還可以繼續(xù)嵌套。從而構(gòu)建更加復(fù)雜的布局。

三、元素切換

在響應(yīng)式布局中元素的切換是指，不同元素根據(jù)終端尺寸不同自動(dòng)切換顯示、隱藏狀態(tài)的行為。

元素的切換應(yīng)用場(chǎng)景：

1. 在大屏到小屏的變化過(guò)程中，隱藏部分信息。

2. 對(duì)于某些需要在不同終端上需要呈現(xiàn)截然不同的視覺(jué)效果的設(shè)計(jì)，由于無(wú)法使用一個(gè)元素達(dá)到這種變化。所以需要分別制作兩個(gè)不同的元素，再根據(jù)需要進(jìn)行顯示隱藏。

一般而言，某個(gè)元素塊隱藏之后，該元素右側(cè)的元素會(huì)往左移填充。某行元素隱藏后，該元素以下的元素會(huì)上移填充。設(shè)計(jì)時(shí)遵循此規(guī)律會(huì)有利于技術(shù)實(shí)現(xiàn)。

注意：元素切換功能需要謹(jǐn)慎使用，減少設(shè)計(jì)需要切換的布局，特別是避免對(duì)整一個(gè)網(wǎng)頁(yè)設(shè)計(jì)完全不同的版本。

四、響應(yīng)式樣式

如前文所敘，元素的樣式可以在不同分辨率的視圖內(nèi)進(jìn)行切換。這并不是說(shuō)我們?cè)O(shè)計(jì)時(shí)可以任意設(shè)計(jì)。當(dāng)我們?cè)趐s等設(shè)計(jì)軟件設(shè)計(jì)的樣式無(wú)法通過(guò)css樣式寫(xiě)出，而必須使用圖片或其他復(fù)雜的組合來(lái)實(shí)現(xiàn)的時(shí)候，則難以做到樣式的響應(yīng)式。

這里總結(jié)一些CSS常用的樣式，設(shè)計(jì)師只需使用這些樣式來(lái)組合設(shè)計(jì)，就可以創(chuàng)造出前端容易實(shí)現(xiàn)的響應(yīng)式樣式。

更形象的演示效果請(qǐng)見(jiàn)附件中的Html文件。

(PS：如果想要更深入的了解樣式的響應(yīng)式，還是需要自行了解一下CSS樣式表的寫(xiě)法。)

五、如何優(yōu)化

接下來(lái)，要講的是在響應(yīng)式設(shè)計(jì)中，如何合理的對(duì)多個(gè)端口進(jìn)行布局的調(diào)整，以達(dá)到易于開(kāi)發(fā)的目的。

1. 保持一致的順序

響應(yīng)式布局由于布局的“善變”，對(duì)于內(nèi)容的設(shè)計(jì)也不會(huì)采用固定的大小和順序。一般來(lái)說(shuō)，內(nèi)容是以流的形式進(jìn)行設(shè)計(jì)。對(duì)于內(nèi)容流來(lái)說(shuō)，需要遵循從左到右→從上到下的變化。

這樣設(shè)計(jì)一是符合現(xiàn)代人的閱讀順序且有利于閱讀順序在不同終端上的一致性；二是更利于快速開(kāi)發(fā)前端頁(yè)面。

對(duì)于上圖中，錯(cuò)誤示范的情況，并非決對(duì)不可行，而是一般不建議。這種反常規(guī)的順序，對(duì)于開(kāi)發(fā)來(lái)說(shuō)難度增大許多，而且會(huì)產(chǎn)生更多冗余代碼。

例如之前做過(guò)的一個(gè)網(wǎng)站，就是典型的例子：

2. 盡量不要使用5列

正如前面介紹網(wǎng)格系統(tǒng)時(shí)說(shuō)到過(guò)，網(wǎng)格系統(tǒng)一般采用12列、16列、24列等可以均分為多個(gè)數(shù)的2倍數(shù)列。當(dāng)你想設(shè)計(jì)5均分列、7均分列、9均分列、11均分列等列數(shù)時(shí)會(huì)發(fā)現(xiàn)，這些網(wǎng)格系統(tǒng)并不能滿足所需。一旦設(shè)計(jì)這樣的列數(shù)，就意味著開(kāi)發(fā)人員需要自己寫(xiě)這個(gè)等分樣式或者修改框架的網(wǎng)格系統(tǒng)，降低其效率降低。

并且，這些列數(shù)將比較難和現(xiàn)有的網(wǎng)格系統(tǒng)交互使用，使得響應(yīng)式的設(shè)計(jì)收到影響，開(kāi)發(fā)也同時(shí)受到這些影響。

3. 減少模塊的增減

即便CSS3提供了媒體查詢和元素的顯示隱藏功能，但是我們依然還是盡量的減少通過(guò)隱藏模塊的方式來(lái)向下兼容低分辨率的顯示器。

因?yàn)檫@樣做雖然可以增加用戶體驗(yàn)，但是對(duì)于流量和代碼復(fù)雜度都沒(méi)有任何幫助。

特別對(duì)于受眾面廣的門(mén)戶網(wǎng)站來(lái)說(shuō)，可以說(shuō)寸流量寸金，這樣的響應(yīng)式布局，即便你把移動(dòng)端的頁(yè)面設(shè)計(jì)得非常非常簡(jiǎn)潔，那些隱藏起來(lái)的部分也僅僅只是隱藏起來(lái)了，它依然會(huì)被下載到你的移動(dòng)設(shè)備上。

現(xiàn)階段來(lái)說(shuō)，更好的解決方案，依然是給移動(dòng)端單獨(dú)設(shè)計(jì)一套頁(yè)面，單獨(dú)開(kāi)發(fā)一套代碼。這樣做除了節(jié)省流量外，也能更好的針對(duì)移動(dòng)端的操作習(xí)慣進(jìn)行設(shè)計(jì)，而不用為了兼容更多的終端而犧牲了一些體驗(yàn)。

4. 樣式統(tǒng)一

同一個(gè)模塊在不同終端上盡量做到統(tǒng)一樣式。畢竟視覺(jué)效果更統(tǒng)一的話，品牌感會(huì)比較強(qiáng)。對(duì)于設(shè)計(jì)師的你來(lái)說(shuō)，視覺(jué)規(guī)范更容易寫(xiě)，更容易維護(hù)。

而開(kāi)發(fā)人員也會(huì)感激你的，因?yàn)樗挥脼椴煌臉邮饺ゾ帉?xiě)、去維護(hù)更多的樣式表。

而代碼越少，加載越快，用戶體驗(yàn)也越好。

5. 移動(dòng)優(yōu)先

有沒(méi)有發(fā)現(xiàn)，許多優(yōu)秀的響應(yīng)式網(wǎng)站，設(shè)計(jì)總是那么的簡(jiǎn)潔大方，對(duì)手機(jī)等小屏設(shè)備的支持總是那么的完美，用戶體驗(yàn)好到飛起。

因?yàn)樗麄儾捎玫氖且苿?dòng)優(yōu)先的設(shè)計(jì)原則。移動(dòng)優(yōu)先這個(gè)詞是伴隨著響應(yīng)式而出現(xiàn)的，主要是因?yàn)橐苿?dòng)端的布局和功能總是比更大的設(shè)備簡(jiǎn)單。

而從簡(jiǎn)單到復(fù)雜的過(guò)程總是比從復(fù)雜到簡(jiǎn)單的過(guò)程容易。

而在大屏設(shè)備上觀看簡(jiǎn)潔的內(nèi)容也總是比在小屏設(shè)備上觀看復(fù)雜的內(nèi)容來(lái)得舒服。

于是，當(dāng)我們?cè)O(shè)計(jì)響應(yīng)式網(wǎng)頁(yè)的時(shí)候，應(yīng)該考慮從移動(dòng)端開(kāi)始，先設(shè)計(jì)移動(dòng)端的頁(yè)面，然后再設(shè)計(jì)更大的屏幕，往其中增加更復(fù)雜的布局和內(nèi)容，最終實(shí)現(xiàn)從移動(dòng)端到超大屏幕的漸進(jìn)增強(qiáng)。

六、什么時(shí)候選擇響應(yīng)式設(shè)計(jì)

響應(yīng)式設(shè)計(jì)的誕生是為了解決不同分辨率的終端的適配問(wèn)題，那么它是網(wǎng)頁(yè)設(shè)計(jì)的最佳方案嗎？它可以解決所有網(wǎng)頁(yè)設(shè)計(jì)的問(wèn)題嗎？

答案是否定的。時(shí)至今日，響應(yīng)式的研究已經(jīng)日趨成熟，然而，它仍然只能適用于一部分場(chǎng)景。如果你的項(xiàng)目符合以下幾點(diǎn)，那么響應(yīng)式設(shè)計(jì)會(huì)是個(gè)不錯(cuò)的選擇：

1. 需要更強(qiáng)的兼容性

響應(yīng)式誕生的目的就是為了解決不同終端的兼容問(wèn)題，所以如果你的項(xiàng)目需要兼容多種不同的設(shè)備，那么可以考慮響應(yīng)式設(shè)計(jì)。

2. 節(jié)約維護(hù)成本

響應(yīng)式布局雖然相較于靜態(tài)布局開(kāi)發(fā)難度大，但是維護(hù)成本更低。

相對(duì)于多個(gè)終端多個(gè)版本的頁(yè)面來(lái)說(shuō)，無(wú)論是修改代碼還是運(yùn)維都只需要對(duì)一個(gè)內(nèi)容進(jìn)行操作，而無(wú)需對(duì)每個(gè)端口單獨(dú)維護(hù)。

3. 以展示為主的站點(diǎn)

如果你的網(wǎng)站是功能型的，而且非常復(fù)雜的話，不要考慮響應(yīng)式，因?yàn)轫憫?yīng)式的頁(yè)面代碼冗余很大，不利于復(fù)雜網(wǎng)站的開(kāi)發(fā)。

相反如果你的網(wǎng)站是以內(nèi)容展示為主的話，會(huì)比較適合使用響應(yīng)式布局。

4. 不考慮舊的瀏覽器

由于響應(yīng)式布局的很多實(shí)現(xiàn)手段是基于CSS3的，對(duì)于某些較老的瀏覽器，會(huì)出現(xiàn)兼容問(wèn)題。(“IE”我說(shuō)的就是你，別東張西望！)

所以，如果需要考慮一些舊瀏覽器的兼容問(wèn)題的話，那還是乖乖的做靜態(tài)布局吧。

...

附件是一份用于演示本文所提到的各種響應(yīng)式的實(shí)現(xiàn)效果的Html，請(qǐng)打開(kāi)目錄下的index.html 體驗(yàn)。不要使用低版本的IE打開(kāi)。