HTML頁面響應式布局

2021-10-10 10:32:49 字數 585 閱讀 4612

同一套頁面可以相容不同解析度的裝置。

實現:依賴於柵格系統:將一行平均分成12個格仔,可以指定元素佔幾個格仔

步驟:

1. 定義容器。相當於之前的table、

* 容器分類:

1. container:兩邊留白

2. container-fluid:每一種裝置都是100%寬度

2. 定義行。相當於之前的tr 樣式:row

3. 定義元素。指定該元素在不同的裝置上,所佔的格仔數目。樣式:col-裝置代號-格仔數目

* 裝置代號:

1. xs:超小螢幕 手機 (<768px):col-xs-12

2. sm:小螢幕 平板 (≥768px)

3. md:中等螢幕 桌面顯示器 (≥992px)

4. lg:大螢幕 大桌面顯示器 (≥1200px)

* 注意:

1. 一行中如果格仔數目超過12,則超出部分自動換行。

2. 柵格類屬性可以向上相容。柵格類適用於與螢幕寬度大於或等於分界點大小的裝置。

3. 如果真實裝置寬度小於了設定柵格類屬性的裝置**的最小值,會乙個元素沾滿一整行。

頁面的響應式布局實現

當你設定乙個元素的高度為100 時,期望這樣元素能撐滿整個瀏覽器視窗的高度,但大對數情況下,這樣做法沒有任何效果,你知道為什麼height 100 不起作用嗎?按常理,當我們用css的height屬性定義乙個元素的高度時,這個元素應該按照設定在瀏覽器的縱向空間裡擴充套件相應的空間距離。例如,如果乙個...

HTML之meta 響應式布局

在head標籤中的meta標籤,可以為html文件提供額外資訊 meta屬性主要分為兩組 1.name屬性與content屬性 name屬性用於描述網頁,它是以名稱 值形式的名稱,name屬性的值所描述的內容 值 通過content屬性表示,便於搜尋引擎機械人查詢,分類.其中最重要的是descrip...

HTML之meta 響應式布局

在head標籤中的meta標籤,可以為html文件提供額外資訊 meta屬性主要分為兩組 1.name屬性與content屬性 name屬性用於描述網頁,它是以名稱 值形式的名稱,name屬性的值所描述的內容 值 通過content屬性表示,便於搜尋引擎 機械人查詢,分類.其中最重要的是descri...