移動WEB響應式設計

pc上的web頁面在手機移動端等裝置上顯示要加入meta標籤中的viewport對頁面進行渲染，否則排版出現錯亂。

width：設定布局viewport的特定值("device-width")裝置寬度initial-scale：設定頁面的初始縮放minumum-scale：最小縮放maximum-scale：最大縮放

user-scaleable：使用者能否縮放

initial-scale自帶width=device-with【度量viewport】=【布局viewport】移動web最佳viewport設定【布局viewport】=【裝置寬度】=【度量viewpoint】

【常用】

響應式設計核心=>**查詢

@media screen and (max-width: value) 
#dog
}

響應式設計**型別：screen(螢幕)print(印表機)handheld(手持裝置)

all(通用)

常用**查詢引數

width——視口寬高

height——視口寬高

device-width——裝置的寬度

device-height——裝置的高度

orientation：檢查裝置處於橫向(landscape)還是豎屏(portrait)

設計點一：百分比布局

改變盒子的百分比，進行縮放顯示等等。

img

如同第一點布局使用百分比，也使用百分比。其背後的思路：無論何時，都全包在的元素寬度範圍內，以最大的寬度比完整的顯示。設計點三：重新布局，顯示與隱藏1.同比列縮減元素尺寸2.調整頁面結構布局3.隱藏多餘的元素

通常需要切換位置元素使用【絕對定位】，減少重繪提高渲染效能。

小例子

pc瀏覽器

ipad橫屏(1024x768)

ipad豎屏(768x1024)

總的來說響應式布局比較好，不用寫多套css**適應裝置，直接用**查詢就好了。