HTML之meta 響應式布局

2021-07-28 03:47:49 字數 1677 閱讀 7512

在head標籤中的meta標籤,可以為html文件提供額外資訊

meta屬性主要分為兩組

1.name屬性與content屬性

name屬性用於描述網頁,它是以名稱/值形式的名稱,name屬性的值所描述的內容(值)通過content屬性表示,便於搜尋引擎機械人查詢,分類.其中最重要的是description,keywords

2.http-equiv屬性與content屬性

http-equiv屬性用於提供http協議的響應頭報文(mime文件頭),它是以名稱/值形式的名稱,http-equiv屬性的值所描述的內容(值)通過content屬性表示,通常為網頁載入前提供給瀏覽器等裝置使用.其中最重要的是content-type charset 提供編碼資訊,refresh重新整理與跳轉頁面,no-cache 頁面快取,expires網頁快取過期時間.

應該保持在140-200個字元或者100個左右的漢字;

一張640*480:長640畫素,寬480畫素。單位面積上畫素點越多(即畫素點越小),這就越清晰細膩。但是每乙個畫素多少公釐取決於顯示器的解析度。a顯示器640*480,b顯示器1200*480,ab顯示器長寬相同。那麼在a顯示器上剛好鋪滿,每個畫素點很大,很粗糙,在b顯示器上不能鋪滿,每個畫素點比較小,比較清晰。

移動裝置上的viewport就是瀏覽器上用來顯示網頁的那部分區域。

一般來講,移動裝置上的viewport都是要大於瀏覽器可視區域的,這樣那些為桌面設計的**也能在移動瀏覽器上正常顯示,帶來的後果就是瀏覽器會出現橫向滾動條。移動裝置預設的viewport是layout viewport。

layout viewport 的寬度是大於瀏覽器可視區域的寬度的,layout viewport的寬度可以通過 document.documentelement.clientwidth 來獲取;(通常是980px)

visual viewport的寬度是瀏覽器可視區域的大小, visual viewport的寬度可以通過window.innerwidth 來獲取;

name="viewport"

content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

meta標籤的作用是讓layout viewport的寬度等於裝置的寬度也就是visual viewport的寬度,同時不允許使用者手動縮放。沒有設定meta,css的320px在手機螢幕中大約只有1/3寬。設定了meta,css的320px在手機螢幕中差不多鋪滿螢幕。

參考資料:

HTML之meta 響應式布局

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

HTML頁面響應式布局

同一套頁面可以相容不同解析度的裝置。實現 依賴於柵格系統 將一行平均分成12個格仔,可以指定元素佔幾個格仔 步驟 1.定義容器。相當於之前的table 容器分類 1.container 兩邊留白 2.container fluid 每一種裝置都是100 寬度 2.定義行。相當於之前的tr 樣式 ro...

HTML響應式布局實現詳解

1 viewport是網頁預設的寬度和高度,上面這行 的意思是 網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 為1.0,即網頁初始大小佔螢幕面積的100 所有主流瀏覽器都支援這個設定,包括ie9。對於那些老式瀏覽器 主要是ie6 7 8...