2）作為開發者無需關注這些解析度，因為我們常用的尺寸單位是 px 。
3、移動端除錯方法
1）chrome devtools（谷歌瀏覽器）的模擬手機除錯
2）搭建本地web伺服器，手機和伺服器乙個區域網內，通過手機訪問伺服器
3）使用外網伺服器，直接ip或網域名稱訪問
二、視口
視口（viewport）就是瀏覽器顯示頁面內容的螢幕區域。視口可以分為布局視口、視覺視口和理想視口
1、布局視口 layout viewport
1）一般移動裝置的瀏覽器都預設設定了乙個布局視口，用於解決早期的pc端頁面在手機上顯示的問題。
2）ios, android基本都將這個視口解析度設定為 980px，所以pc上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般預設可以通過手動縮放網頁。
2、視覺視口 visual viewport
1）字面意思，它是使用者正在看到的**的區域。注意：是**的區域。
2）我們可以通過縮放去操作視覺視口，但不會影響布局視口，布局視口仍保持原來的寬度。
3、理想視口 ideal viewport
1）為了使**在移動端有最理想的瀏覽和閱讀寬度而設定
2）理想視口，對裝置來講，是最理想的視口尺寸
3）需要手動添寫meta視口標籤通知瀏覽器操作
4）meta視口標籤的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是裝置有多寬，我們布局的視口就多寬
5）總結：我們開發最終會用理想視口，而理想視口就是將布局視口的寬度修改為視覺視口
4、meta標籤
2）最標準的viewport設定
（1）視口寬度和裝置保持一致
（2）視口的預設縮放比例1.0
（3）不允許使用者自行縮放
（4）最大允許的縮放比例1.0
（5）最小允許的縮放比例1.0
三、二倍圖
1、物理畫素&物理畫素比
1）物理畫素點指的是螢幕顯示的最小顆粒，是物理真實存在的
2）我們開發時候的1px 不是一定等於1個物理畫素的
3）乙個px的能顯示的物理畫素點的個數，稱為物理畫素比或螢幕畫素比
4）對於一張 50px * 50px 的,在手機或 retina 屏中開啟，按照剛才的物理畫素比會放大倍數，這樣會造成模糊
5）在標準的viewport設定中，使用倍圖來提高質量，解決在高畫質裝置中的模糊問題
6）通常使用二倍圖， 因為iphone 6 的影響背景 注意縮放問題
2、背景縮放background-size
2）單位： 長度|百分比|cover|contain;
3）cover把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。
4）contain把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域
四、移動開發選擇和技術解決方案
1、移動端主流方案
1）單獨製作移動端頁面（主流）
（1）通常情況下，**網域名稱前面加 m(mobile)
（2）可以開啟移動端。通過判斷裝置，如果是移動裝置開啟，則跳到移動端頁面。
（3）也就是說，pc端和移動端為兩套**，pc端是pc斷的樣式，移動端在寫一套，專門針對移動端適配的一套**
2）響應式頁面相容移動端（其次）
響應式**：即pc和移動端共用一套**，只不過在不同螢幕下，樣式會自動適配
2、 移動端技術解決方案
1）移動端瀏覽器相容問題
移動端瀏覽器基本以 webkit 核心為主，因此我們就考慮webkit相容性問題。
我們可以放心使用 h5 標籤和 css3 樣式。
同時我們瀏覽器的私有字首我們只需要考慮新增 webkit 即可
2）移動端公共樣式
移動端 css 初始化推薦使用 normalize.css/
3）移動端大量使用 css3盒子模型box-sizin
4）移動端特殊樣式
五、移動端常見布局
1、移動端單獨製作
（1）流式布局（百分比布局）
（2）flex 彈性布局（強烈推薦）
（3）less+rem+**查詢布局
（4）混合布局
2、響應式
（1）**查詢
（2）bootstarp
3、流式布局：
1）流式布局，就是百分比布局，也稱非固定畫素布局。
2）通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素的限制，內容向兩側填充。
3）流式布局方式是移動web開發使用的比較常見的布局方式。
注：1）需要適配各種螢幕的寬度尺寸用百分比
2）在各螢幕上固定的寬度尺寸(通常為小尺寸)用px
3）高度及font-size用px
4）body通常設min-width及max-width來限定寬度範圍
移動端流式布局
移動端除錯方法 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可以分為布局視口 視覺視口和理想視口 視覺視口 visual viewport 我們可以通過縮放去操作視覺視口，但不會影響視口，布局視口仍保持原來的寬度 理想視口ideal viewport 理想視口，對裝置來講，是最理想...
Web移動端布局
螢幕尺寸是指螢幕對角線的長度，單位為英吋，1英吋 2.54厘公尺 常見移動端裝置螢幕尺寸 iphone4 3.5英吋 iphone6,7,8 4.7英吋 iphone6,7,8 plus 5.5英吋 iphone5 4英吋 螢幕解析度是指橫縱方向上的畫素點數，單位為px，1px 1畫素點 常見移動端...
web移動端布局
對移動端適配不熟悉的同學，可以看看 使用flexible實現手淘h5頁面的終端適配 再聊移動端頁面的適配 如何在vue專案中使用vw實現移動端適配 vw 是什麼？vw viewport s width 簡寫，1vw 等於 window.innerwidth 的 1 vh viewport s hei...