HTML5+CSS3

2021.6HTML5andCSS3第14章

響應式布局響應式概述彈性布局媒體查詢（@media）DEMO（用網格布局實現(xiàn)響應式）斷點DEMO（實現(xiàn)Boostrap響應式柵格系統(tǒng)）元視口標簽（viewport）DEMO彈性媒體DEMO（仿蘋果官網的響應式頁頭）第14章

響應式布局

第14章

響應式布局響應式概述在Web設計的早期，頁面是針對特定屏幕尺寸而構建的，比如早期非常普遍的顯示器分辨率是1024x768px。如果用戶的屏幕小于或大于設計者的預期，則會出現(xiàn)滾動條或者無法充分利用空間。特別是隨著智能手機的普及，出現(xiàn)了越來越多的設備和屏幕尺寸，比如手機、平板電腦、筆記本和臺式機等，這樣就出現(xiàn)了“響應式”網頁設計的概念，這是一系列支持網頁更改其布局和外觀以適應不同的屏幕寬度和分辨率等的做法。響應式設計不是一個單獨的技術，它是一種理念，是一種網頁設計和開發(fā)方法，CSS提供了一系列的規(guī)則來支撐這種設計。響應式網頁設計主要分為三個部分，包括彈性布局，媒體查詢和彈性媒體。第14章

響應式布局彈性布局“彈性布局”是一種使用“彈性網格”構建網頁布局的實踐，該網格能夠動態(tài)調整為任意寬度，網格內部的內容隨著寬度的變化而變化，不會超出邊界。彈性網格是使用相對長度單位（通常為百分比）構建的。彈性布局不主張使用固定的度量單位，例如像素或英寸。原因是，視口的高度和寬度會在設備之間不斷變化。網頁布局需要適應這種變化，固定值有太多限制。我們可以運用一個簡單的公式，計算出靈活布局的比例。換算公式是：目標元素寬度÷父元素寬度=相對百分比。第14章

響應式布局媒體查詢（@media）響應式設計中最重要的技術是媒體查詢（mediaquery），它是CSS樣式的過濾器，可以輕松地根據(jù)設備類型或該設備的功能（例如寬度，高度，方向，懸停能力，觸摸）來更改樣式。媒體查詢以@media開頭，然后由可選的媒體類型和任意數(shù)量的媒體功能表達式組成，當設備符合這些條件時就會應用相應的樣式，即覆蓋原有的樣式。第14章

響應式布局DEMO：用網格布局實現(xiàn)響應式用Grid實現(xiàn)圣杯布局第14章

響應式布局斷點響應式設計經常會遇到一個術語——斷點。斷點是確定何時更改布局并在媒體查詢中調整新規(guī)則的關鍵。最常見的問題之一是“應該使用哪個斷點”。市場上有大量設備，因此我們不能也不應為每個設備定義固定的斷點。但是我們可以設置一些常用的斷點，來支持大多數(shù)設備。一些前端框架（例如Bootstrap）也是這么做的。根據(jù)常用的設備，我們可以大致定義出一些常見斷點：320px—768px：小屏幕，手機769px—1024px：中屏幕，平板電腦1025px—1200px：大屏幕，筆記本1201px及以上：超大屏幕，大顯示器第14章

響應式布局動手練習：實現(xiàn)Boostrap響應式柵格系統(tǒng)

本案例使用兩個斷點顯示三個設備：小型設備，小于768px中型設備，大于等于768px，且小于1200px大型設備，大于1200px斷點CSS類中綴寬度特小無<576px小sm≥576px中md≥768px大lg≥992px特大xl≥1200px第14章

響應式布局DEMO第14章

響應式布局元視口標簽（viewport）除了媒體查詢外，響應式布局還有一個關鍵的設置，即元視口（viewport）標簽。元視口標簽為瀏覽器提供了有關如何控制頁面尺寸和縮放比例的說明。為了嘗試提供最佳體驗，移動瀏覽器會以桌面屏幕寬度（通常是980px，設備之間會有所不同）來呈現(xiàn)頁面，然后嘗試通過增加字體大小或縮放內容的手段，使得頁面能夠適合屏幕，讓網頁內容看起來更好。元視口的值width=device-width會指示頁面匹配屏幕的寬度，這個寬度的單位是設備獨立像素（DIP，又稱設備無關像素）。

第14章

響應式布局元視口標簽（viewport）

initial-scale=1，它指定瀏覽器在CSS像素和與設備無關的像素之間建立1：1關系，而與設備方向無關，并允許頁面利用整個橫向寬度。其他屬性說明屬性說明width設置layoutviewport的寬度，為一個正整數(shù)，或字符串"width-device"initial-scale設置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)minimum-scale允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù)maximum-scale允許用戶的最大縮放值，為一個數(shù)字，可以帶小數(shù)height設置layoutviewport的高度，這個屬性對我們并不重要，很少使用user-scalable是否允許用戶進行縮放，值為"no"或"yes",no代表不允許，yes代表允許第14章

響應式布局DEMO第14章

響應式布局彈性媒體響應式網頁設計的最后一個同樣重要的方面涉及彈性媒體。圖像，視頻和其他媒體類型需要可伸縮，并隨著視口大小的變化而改變其大小。使媒體可伸縮的一種快速方法是將元素的max-width值設置100%。這樣做可以確保隨著視口變小，任何媒體都將根據(jù)其容器寬度縮小。第14章

響應式布局動手練習：仿蘋果官網的響應式頁頭第14章

響應式布局DEMO第14章

響應式布局響應式概述彈性布局媒體查詢（