移動端響應式布局開發設計

整理的一些關于h5新特性和移動端的一些知識點

1.HTML5新增結構標簽及兼容性處理

HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定；

HTML5的設計目的是為了在移動設備上支持多媒體；

HTML5 簡單易學；

HTML5 是下一代 HTML 標準；

HTML , HTML 4.01的上一個版本誕生于 1999 年。自從那以后，Web 世界已經經歷了巨變；

HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持；

HTML5新特性

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

HTML5的新增標簽

canvas 新元素

canvas標簽定義圖形，比如圖表和其他圖像。該標簽基于 JavaScript 的繪圖 API

新多媒體元素

audio定義音頻內容

video定義視頻（video 或者 movie）

source定義多媒體資源 video和 audio

embed定義嵌入的內容，比如插件

track為諸如 video 和 audio 元素之類的媒介規定外部文本軌道。

新表單元素

datalist 定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。

keygen 規定用于表單的密鑰對生成器字段。

output 定義不同類型的輸出，比如腳本的輸出。

新的語義和結構元素

header 定義了文檔的頭部區域

footer 定義 section 或 document 的頁腳。

nav 定義導航鏈接的部分。

section 定義文檔中的節（section、區段）。

article 定義頁面獨立的內容區域。

figure 規定獨立的流內容（圖像、圖表、照片、代碼等等）。

figcaption 定義figure元素的標題

aside 定義頁面的側邊欄內容。

time 定義日期或時間。

command 定義命令按鈕，比如單選按鈕、復選框或按鈕

details 用于描述文檔或文檔某個部分的細節

dialog 定義對話框，比如提示框

summary 標簽包含 details 元素的標題

mark 定義帶有記號的文本。

meter 定義度量衡。僅用于已知最大和最小值的度量。

progress 定義任何類型的任務的進度。

bdi 允許您設置一段文本，使其脫離其父元素的文本方向設置。

ruby 定義 ruby 注釋（中文注音或字符）。

rt 定義字符（中文注音或字符）的解釋或發音。

rp 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。

wbr 規定在文本中的何處適合添加換行符。

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性;

/*載入后，初始化新標簽的CSS*/

article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

2.video與audio詳解

您的瀏覽器不支持Video標簽。

您的瀏覽器不支持 audio 元素。

3.HTML5表單詳解

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

color 從拾色器中選擇一個顏色

date 類型允許你從一個日期選擇器選擇一個日期

datetime datetime 類型允許你選擇一個日期（UTC 時間）

datetime-local 類型允許你選擇一個日期和時間 (無時區).

email 用于應該包含 e-mail 地址的輸入域

month 類型允許你選擇一個月份

number 類型用于應該包含數值的輸入域

range 用于應該包含一定范圍內數字值的輸入域。

search 類型用于搜索域

tel 定義輸入電話號碼字段

time 類型允許你選擇一個時間

url 類型用于應該包含 URL 地址的輸入域

week 類型允許你選擇周和年

設置對象文字占位符的樣式, 除了Firefox是 ::[prefix]placeholder，其他瀏覽器都是使用 ::[prefix]input-placeholder;

input::-webkit-input-placeholder {

color: #999;

}

input:-ms-input-placeholder { // IE10+

color: #999;

}

input:-moz-placeholder { // Firefox4-18

color: #999;

}

input::-moz-placeholder { // Firefox19+

color: #999;

}

datalist: 元素規定輸入域的選項列表，屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項；

4.視口viewport深入理解

移動前端中常說的 viewport （視口）就是瀏覽器顯示頁面內容的屏幕區域;

width: 控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。

height: 和width相對應，指定高度。

initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。

maximum-scale：允許用戶縮放到的最大比例。

minimum-scale：允許用戶縮放到的最小比例。

user-scalable：用戶是否可以手動縮放

// 快捷鍵生成：meta:vp tab

5.移動端頁面設計規范及頁面分析

移動端頁面設計稿

項目常用設計稿尺寸一: 640 * 1136 (iPhone5 )

項目常用設計稿尺寸二: 750 * 1334 (iPhone6 )

項目常用設計稿尺寸三: 1242 * 2208 (iPhone6Plus )

物理分辨率和顯示分辨率

iPhone5 ： 分辨率 320 * 568，物理像素 640 * 1136， DPR: 2.0

iPhone6： ?分辨率 375 * 667，物理像素 750 * 1334， DPR: 2.0

iPhone6P：分辨率 414 * 736，物理像素1242 * 2208，DPR: 3.0

6.移動端設備像素比理解

像素比window.devicePixelRatio

dpr（device pixel ratio）：設備像素比，設備像素/設備獨立像素，代表設備獨立像素到設備像素的轉換關系，在JS中可以通過 window.devicePixelRatio 獲取；

計算公式：邏輯分辨率 = 物理分辨率 / devicePixelRatio

7.響應式網站設計的概念及實踐原則

響應式布局，Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

響應式設計的步驟

設置 meta標簽，讓瀏覽器窗口和設備寬度保持一致；

通過媒介查詢來設置樣式 Media Queries；

8.媒體查詢@media使用

語法: @media 媒體類型 邏輯操作符 (媒體屬性) ｛樣式代碼｝

邏輯操作符

and：?操作符用來把多個媒體屬性組合起來，合并到同一條媒體查詢中。只有當每個屬性都為真時，這條查詢的結果才為真；?@media?all and （min-width:700px）and （orientation: lanscape）{...}

not：操作符用來對一條媒體查詢的結果進行取反;

@media?not all ?and （monochrome){...} ?<=>?@media?not (all ?and (monochrome)){...}

only：操作符表示僅在媒體查詢匹配成功時應用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應用； ?media = "only screen and（max-width：1000px)" {...}

媒體屬性

width | min-width | max-width

height | min-height | max-height

device-width | min-device-width | max-device-width

device-height | min-device-height | max-device-height

aspect-ratio | min-aspect-ratio | max-aspect-ratio

device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio

color | min-color | max-color

color-index | min-color-index | max-color-index

monochrome | min-monochrome | max-monochrome

resolution | min-resolution | max-resolution

scan | grid

// @media (orientation: portrait) { 豎屏 }

// @media (orientation: landscape) { 橫屏 }

9.rem及百分比布局及移動適配

相對長度單位。相對于根元素(即html元素)font-size計算值的倍數;

根元素html默認的font-size為16px;

為了方便計算，我們一般給父元素的font-size設置為100px;

// 針對750的設計稿

9.彈性盒模型Flexbox布局

display：-webkit-box；

display: ?-webkit-flex;

display: ?-ms-flexbox;

display: ?flex;

HTML5 HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。