淺談html5 響應式佈局_html5教學技巧
- WBOY原創
- 2016-05-16 15:46:581322瀏覽
一、什麼是響應式版面?
響應式佈局是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：
上使用於only可省略，且限定於電腦顯示器，第一個條件與裝置渲染
b、以樣式表內嵌@media：
@media (min-device-width: 1024px) 與 (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px)
and (orientation:landscape),(min-device-width:480px ) and (max-device-width:1024px) and (orientation:portrait) {srules}
コンピューターのモニターの解像度 (幅) を 1024 ピクセル以上に設定します (表示される最大幅は 989 ピクセル)。ハンドヘルド デバイスの場合、画面の幅は 480 ピクセルで、水平に配置されます。つまり、480 サイズは地面と平行です) ハンドヘルド デバイス
画面幅が 480px 以上 1024px 未満で、デバイスの CSS スタイルが縦方向に配置されます。
4. レスポンシブレイアウトの実装