a:一種是pc端瀏覽器（谷歌，火狐，ie，歐朋，其他）
b:一種是m端瀏覽器
--移動端瀏覽器只需要做 -webkit-相容就行.
pc端頁面需要相容各個瀏覽器，移動端頁面需要相容各個手機尺寸
viewport===視口，視口就是瀏覽器顯示內容的區域。視口指的是瀏覽器的可視區域，其寬度和瀏覽器視窗的寬度保持一致。
移動端
分為三個視口：布局視口、視覺視口和理想視口。（理想視口是我們布局常用的視口）
布局視口（layout viewport）
布局視口（layout viewport），用於解決早期的頁面在手機上顯示的問題。
但是布局視口的缺點是網頁元素在手機上看上去很小，一般預設可以通過手動縮放網頁。
視覺視口（visual viewport）
視覺視口是使用者當前看到的區域，使用者可以通過縮放操作視覺視口，同時不會影響布局視口。
理想視口（ideal viewport）
它對裝置而言是最理想的布局視口尺寸。顯示在理想視口中的**具有最理想的寬度，
使用者無需進行縮放。理想視口的值其實就是螢幕解析度的值，它對應的畫素叫做裝置邏輯畫素
name
="viewport"
content
="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
width device-width 定義視口的寬度等於裝置的寬度
initial-scale [0-1] 定義初始縮放值
minimum-scale [0-1] 定義放大最大比例
maximum-scale [0-1] 定義縮小最小比例
user-scalable yes / no 定義是否允許使用者手動縮放頁面，預設值 yes
有幾點值得注意：
1：viewport 標籤只對移動端瀏覽器有效，對 pc 端瀏覽器是無效的
2：即使設定了 user-scalable = no，在 android chrome 瀏覽器中也可以強制啟用手動縮放
螢幕解析度==物理畫素
1920*968 解釋為：pc端瀏覽器上可以橫著排列1920個畫素點，豎著排列968個畫素點。
pc端，1px==1個畫素。但是移動端他們就不相等。
移動端 1px==2個畫素
彈性盒子布局
**查詢布局（適配多個終端的）
bootstarp框架
rem
less
**查詢
移動端頁面布局
上下兩條固定到上邊和下邊，中間的內容區域佔據剩餘的空間 all html,body,container 第一種方法 1 header高度固定畫素，footer固定畫素。section高度calc 100 header高度 footer高度 2 header,footer設定絕對定位的方式 absol...
移動端頁面布局
關於移動端頁面的總結，最近接觸移動端頁面，簡單的介紹幾種頁面布局吧，以後繼續補充。1 移動端頁面需要在頭部新增 2 移動頁面的布局方式 1 橫向百分比，縱向畫素值 可以採用百分比 相對度量單位 進行盒模型橫向屬性 width 左右內邊距 左右外邊距 的製作，使用em 相對度量單位 實現文字的處理。但...
自我學習第十四天 移動端的準備
查詢可以在不同裝置的解析度下設定內容的樣式，也是響應式 的核心原理 語法 media 設定 關鍵字 表示式 栗子 media all and max width 1000px 豎屏的樣式 media screen and orientation portrait 橫屏的樣式 media screen...