名詞解釋
-
響應(yīng)式Web設(shè)計(jì)（RWD）
響應(yīng)式Web設(shè)計(jì)，即Responsive Web Design彰居，就是網(wǎng)頁(yè)內(nèi)容會(huì)隨著訪問(wèn)它的視口（viewport）及設(shè)備（device）的不同而呈現(xiàn)不同樣式（style）灾茁〈芫酰可以讓W(xué)eb作品適配手機(jī)、平板和桌面電腦北专。響應(yīng)式的網(wǎng)站可以適應(yīng)用戶的屏幕大小禀挫，為今天和明天的設(shè)備都提供最佳的用戶體驗(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（媒體查詢）
可以讓我們?cè)谀承l件下（如在知道寬度和高度多少的情況下）為網(wǎng)頁(yè)應(yīng)用樣式搅窿。
RWD與前端的關(guān)系：
前端是Web的網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)結(jié)構(gòu)隙券、外觀等等我們可以直接看到的東西男应，RWD在其中起到的作用有：可以讓用戶根據(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/
