總結：相容移動端主流瀏覽器，處理webkit核心瀏覽器即可。
+視口寬度和裝置保持一致
視口的預設縮放比例1.0
不允許使用者自行縮放
最大允許的縮放比例1.0
最小允許的縮放比例1.0
物理畫素點指的是螢幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設定好了,比如蘋果6 是 750* 1334
我們開發時候的1px 不是一定等於1個物理畫素的,乙個px的能顯示的物理畫素點的個數，稱為物理畫素比或螢幕畫素比 ,如果把1張100*100的放到手機裡面會按照物理畫素比給我們縮放對於一張 50px * 50px 的,在手機或 retina 屏中開啟，按照剛才的物理畫素比會放大倍數，這樣會造成模糊
在標準的viewport設定中，使用倍圖來提高質量，解決在高畫質裝置中的模糊問題
通常使用二倍圖， 因為iphone 6 的影響背景 注意縮放問題
```cover把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。background-size: 背景寬度 背景高度;
```
contain把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域
通常情況下，**網域名稱前面加 m(mobile)
可以開啟移動端。通過判斷裝置，如果是移動裝置開啟，則跳到移動端頁面。
也就是說，pc端和移動端為兩套**，pc端是pc斷的樣式，移動端在寫一套，專門針對移動端適配的一套**
移動端瀏覽器基本以 webkit 核心為主，因此我們就考慮webkit相容性問題。
我們可以放心使用 h5 標籤和 css3 樣式。
同時我們瀏覽器的私有字首我們只需要考慮新增 webkit 即可
移動端 css 初始化推薦使用 normalize.css/
normalize.css：保護了有價值的預設值
normalize.css：修復了瀏覽器的bug
normalize.css：是模組化的
normalize.css：擁有詳細的文件
```+ 流式布局（百分比布局）/*css3盒子模型*/
box-sizing: border-box;
/*傳統盒子模型*/
box-sizing: content-box;
```
+ flex 彈性布局（強烈推薦）
+ less+rem+**查詢布局
響應式布局
+ **查詢流式布局：+ bootstarp
流式布局，就是百分比布局，也稱非固定畫素布局。通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素的限制，內容向兩側填充。
流式布局方式是移動web開發使用的比較常見的布局方式。
移動Web端 流式布局
2 作為開發者無需關注這些解析度，因為我們常用的尺寸單位是 px 3 移動端除錯方法 1 chrome devtools 谷歌瀏覽器 的模擬手機除錯 2 搭建本地web伺服器，手機和伺服器乙個區域網內，通過手機訪問伺服器 3 使用外網伺服器，直接ip或網域名稱訪問 二 視口 視口 viewport ...
002 移動WEB開發之流式布局 md
新建模板 小書匠 前言 學習目標 學習目錄 pc端常見瀏覽器 移動端常見瀏覽器 總結 相容移動端主流瀏覽器，處理webkit核心瀏覽器即可。各種尺寸的顯示裝置 常見移動端螢幕尺寸 作為前端開發,我們不需要去糾結 dp dpi pt ppt 等單位.視口 viewport 就是瀏覽器顯示頁面內容的螢幕...
移動web開發 rem布局
rem單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。不同的是rem的基準是相對於html元素的字型大小。比如，根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px。根html 為 12px html 此時 ...