淺談html5 響應式佈局

一、什麼是響應式佈局?

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

這個概念是為解決行動網路瀏覽而誕生的。響應式佈局可以為不同終端的使用者提供更舒適的介面和更好的使用者體驗，而且隨著目前大螢幕行動裝置的普及，用大勢所趨來形容也不為過。

隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

二、響應式佈局有哪些優點和缺點?

優點：

面對不同分辨率設備靈活性強
能夠快速解決多設備顯示適應問題
缺點：

兼容各種設備工作量大，效率低下
程式碼累贅，會出現隱藏無用的元素，載入時間加長
其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
其實程度上改變了網站原有的版面結構，會出現使用者混淆的情況

三、響應式佈局該怎麼設計?

1、 如何解決不同設備間的相容問題？

CSS3中的Media Query（媒介查詢）可以解決這個問題。

2、media query能夠取得哪些值?

裝置的寬和高device-width，device-heigth顯示螢幕/觸覺裝置。

渲染視窗的寬和高width，heigth顯示螢幕/觸覺設備。

設備的手持方向，橫向還是豎向orientation(portrait|lanscape)和印表機等。

畫面比例aspect-ratio點陣印表機等。

設備比例device-aspect-ratio-點陣印表機等。

物件顏色或顏色清單color，color-index顯示螢幕。

設備的分辨率resolution

3、語法結構及用法

語法：@media 設備名稱only (選取條件) not (選取條件) and(設備選取條件)，設備二{sRules}

用法：

用法：

a、範例一：在link中使用@media：

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />

上面使用中only可省略，限定於電腦顯示器，第一個條件max-width是指渲染介面最大寬度，第二個條件max-device- width是指設備最大寬度。

b、在樣式表中內嵌@media：

【相關推薦】

1. HTML5開發手機應用-詳細介紹viewport的作用（圖文）

flex2.  微信小程式：版面實例

3. HTML5 程式設計

4. 小程式開發之利用co處理非同步流程的實例教學

🎜