名詞解釋
-
響應(yīng)式Web設(shè)計(jì)（RWD）
響應(yīng)式Web設(shè)計(jì)，即Responsive Web Design，就是網(wǎng)頁(yè)內(nèi)容會(huì)隨著訪(fǎng)問(wèn)它的視口（viewport）及設(shè)備（device）的不同而呈現(xiàn)不同樣式（style）?？梢宰學(xué)eb作品適配手機(jī)、平板和桌面電腦。響應(yīng)式的網(wǎng)站可以適應(yīng)用戶(hù)的屏幕大小，為今天和明天的設(shè)備都提供最佳的用戶(hù)體驗(yàn)。
-
彈性網(wǎng)格布局
在我們的Web內(nèi)容中被分為很多個(gè)內(nèi)容區(qū)塊，這些區(qū)塊都有自己占據(jù)的區(qū)域，可以將這個(gè)區(qū)域想象成是虛擬的網(wǎng)格。
-
DIV
稱(chēng)為區(qū)隔標(biāo)記，作用于圖、表和畫(huà)等的擺放位置。
Data Example
1.從全球數(shù)據(jù)關(guān)于“Desktop vs Mobile vs Tablet 市場(chǎng)占據(jù)份額 2009-2018”的圖表來(lái)看：Desktop近年來(lái)在市場(chǎng)的使用份額有所下降，但是就整體的格局來(lái)看，Deaktop依舊占據(jù)很大的市場(chǎng)份額；Mobile在最近幾年占據(jù)市場(chǎng)很大的份額。
由于手機(jī)的普及率大大提高，可是電腦的使用率依舊占據(jù)50%以上，所以需要共同適應(yīng)于手機(jī)和電腦的上網(wǎng)體驗(yàn)至關(guān)重要。這就是為何我們需要“響應(yīng)式Web設(shè)計(jì)”的理由之一。
2.根據(jù)“Screen Resolution Stats Worldwide 2009-2018”的數(shù)據(jù)來(lái)看
從2009年至2018年增長(zhǎng)最多的屏幕分辨率來(lái)看是360x640，這個(gè)是適應(yīng)于手機(jī)的屏幕分辨率，可以看出大桌面的屏幕分辨率也占據(jù)市場(chǎng)的一部分份額，因此，適應(yīng)大桌面的和手機(jī)小桌面的屏幕分辨率的網(wǎng)頁(yè)設(shè)計(jì)結(jié)構(gòu)十分重要。這是“響應(yīng)式Web設(shè)計(jì)”出現(xiàn)的另外一個(gè)原因。
響應(yīng)式Web設(shè)計(jì) 例子
-
使用Web響應(yīng)式設(shè)計(jì)
eg:IBM官網(wǎng): https://www.ibm.com
-
未使用Web響應(yīng)式設(shè)計(jì)：
eg:電子科技大學(xué)中山學(xué)院：http://www.zsc.edu.cn
RWD的三項(xiàng)組成科技：
-
Fluid Grid （流式格網(wǎng)）
不使用固定的px來(lái)確定頁(yè)面像素的寬度，使用%來(lái)確定。
-
Flexible Images（彈性圖片）
指的是在現(xiàn)代瀏覽器中，圖片可以根據(jù)頁(yè)面的大小進(jìn)行調(diào)整，即圖片的自適應(yīng)處理，根據(jù)容器的大小調(diào)整到適合的比例。
-
Media Queries（媒體查詢(xún)）
可以讓我們?cè)谀承l件下（如在知道寬度和高度多少的情況下）為網(wǎng)頁(yè)應(yīng)用樣式。
RWD與前端的關(guān)系：
前端是Web的網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)結(jié)構(gòu)、外觀等等我們可以直接看到的東西，RWD在其中起到的作用有：可以讓用戶(hù)根據(jù)不同的頁(yè)面大小更換網(wǎng)頁(yè)的格局，從而達(dá)到良好的閱讀體驗(yàn)。
RWD與后端的關(guān)系
后端是數(shù)據(jù)庫(kù)、云端數(shù)據(jù)之間的交互，更注重于網(wǎng)頁(yè)的性能等。
Marcotte的個(gè)人網(wǎng)頁(yè)：https://ethanmarcotte.com/
