前端H5移動端響應式介紹

一 響應式佈局

1.什麼是響應式佈局

可以根據不同客戶端不同的尺寸,達到適應螢幕功能叫響應式。

一個頁面多套樣式

二 HTML自帶響應式標籤（回顧）

1.@media 媒體查詢標籤

使用方法:
@media 裝置 連線符 (條件){ 滿足條件的CSS程式碼 }

例 : @media screen and (max-width: 960px){
   body{
         background: #000;
}
}
Ps：內容間都有空格

2.@media 響應式查詢
1)裝置常用屬性:
all 所有裝置
screen 螢幕 “思克潤”
print 列印裝置
2)連線符:
and 表示與，並且，和，同時 連線多條件
not 表示除了 指裝置
only 表示只有 指裝置
3)條件值:
max-width 小於
min-width 大於
max-device-width 等於

三 網頁中的標準設計:
1.最流行的解析度是19201080的，在該解析度下，頁面中心區域為1200px以內都可以。建議1190px
2. 1024768下，網頁寬度保持在1002以內；建議 990px
3. 800*600下， 網頁寬度保持在778以內； 建議 770px

獲取視覺化視窗的寬度
document.documentElement.clientWidth ||
document.body.clientWidth (推薦)(ps注意:去掉自帶樣式)

document.body.offsetWidth 一般用於獲取單個元素		

獲取瀏覽器的寬度 包含滾動條
window.innerWidth

Ps: 以百分比方式設頁面時,長度參考父類元素

四 HTML中的長度單位

px 絕對單位 畫素
em 相對單位 相對與父類元素的字型大小
rem 相對單位, 相對於根元素(html)的字型大小

rem與px的換算關係:
如根元素的大小為16px
如果想設定一個為100px的寬度, 100/16 = 6.25rem

如果根元素的大小為20px
100px的寬度為 100/20 = 5rem

推薦方法：
以iPhone6的寬度為標準 375寬
以根元素字元大小為 16

Html. fontSize值為 = 16/375; <---- 基準值

根據當前螢幕可視視窗 * 基準值

五 viewport頭部宣告

viewport用於移動端的樣式宣告,用於為移動端開啟”視區”

設定viewport
viewport 檢視視窗
width=device-width 設定視窗的寬度=裝置的寬度
initial-scale 初始化縮放比例
maximu-scale 允許最大的縮放比例
minimum-scale 允許最小的縮放比例
user-scalable no 禁止使用者縮放 yes 允許使用者縮放

完整版