1. 移動端基礎
1. 瀏覽器現狀
PC端常見瀏覽器： 360瀏覽器、谷歌瀏覽器、QQ瀏覽器、百度瀏覽器、
搜狗瀏覽器、IE瀏覽器。
移動端常見瀏覽器：UC瀏覽器、QQ瀏覽器、歐朋瀏覽器、百度手機瀏覽器、360安全瀏覽器、
谷歌瀏覽器、搜狗瀏覽器、搜狗手機瀏覽器、獵豹瀏覽器、以及其他雜牌瀏覽器。
國內的UC和QQ，百度等手機瀏覽器都是根據webkit修改過來的內核，國內尚無研發的內核，就像國內的手機操作系統都是基於Android
修改開發的一樣。
總結： 兼容移動端主流瀏覽器，處理wekit內核瀏覽器即可。
2. 手機屏幕現狀
1.移動端屏幕尺寸非常多，碎片化嚴重。
2.Android設備有多種分辨率：480x800,480x854,540x960,720x1280,1080x1920等,還有傳說中的2K，4K屏。
3.近年來iPhone的碎片化也加劇了，其設備的主要分辨率有：640x960,640x1136,750x1334,1242x2208等。
4.作爲開發者無需關注這些分辨率，因爲我們常用的尺寸單位是 px。
3.移動端調試方法
1.ChromeDevTools（谷歌瀏覽器）的模擬手機調試
2.搭建本地web服務器，手機和服務器一個局域網內，通過手機訪問服務器。
3.使用外網服務器，直接ip或域名訪問。
4.總結：
1.移動端瀏覽器我們主要對webkit內核進行兼容。
2.我們現在開發的移動端主要針對手機端開發。
3現在移動端碎片化比較嚴重，分辨率和屏幕尺寸大小不一。
4.學會用谷歌瀏覽器模擬手機界面以及調試。
2.視口
視口（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視口標籤的主要目的：佈局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，
我們佈局的視口就多寬。
4.meta視口標籤
<meta name="viewport" content="wiidth=device-width, user-scalable=no, initial-scale=1.0
maximum-scala=1.0, minimum-scale=1.0">
| 屬性 | 解釋說明 |
| width | 寬度設置的是viewport寬度，可以設置device-width特殊值 |
| initial-scale | 初始縮放比，大於0的數字 |
| maximum-scale | 最小縮放比，大於0的數字 |
| minimum-scale | 最小縮放比，大於0的數字 |
| user-scalable | 用戶是否可以縮放，yes或no（1或0） |
5.標準的viewport設置
1.視口寬度和設備保持一致
2.是扣的默認縮放比例1.0
3.不允許用戶自行縮放
4.最大允許的縮放比例1.0
5.最小允許的縮放比例1.0
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,
minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background-color: darkgreen;
}
/* 1. 物理像素就是我們說的分辨率 iPhone8的物理像素是 750 */
/* 2. 在iPhone8裏面 1px 開發像素 = 2個物理像素 */
</style>
</head>
<body>
<div></div>
</body>
</html>
3. 二倍圖
1.物理像素&物理像素比
1.物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設置好了，比如蘋果6\7\8是750*1334
2.我們開發時候的1px不是一定等於1個物理像素的，但是移動端就不盡相同。
3.PC端頁面，1個px等於1個物理像素的，但是移動端就不盡相同。
4.一個px的能顯示的物理像素點的個數，稱爲物理像素比或屏幕像素比。
5.PC端和早前的手機屏幕 / 普通手機屏幕： 1CSS像素 = 1 物理像素的
6.retina（視網膜屏幕） 是一種顯示技術，可以將把更多的物理像素點壓縮至一塊屏幕裏，
從而達到更高的分辨率， 並提高屏幕顯示的細膩程度。
2.多倍圖
1.對於一張50px*50px的圖片，在手機retina屏中打開，按照剛纔的物理像素比會放大倍數，這樣會造成圖片模糊。
2.在標準的viewport設置中，使用倍圖來提高圖片質量，解決在高清設備中的模糊問題。
3.通常使用的二倍圖，因爲iPhone6\7\8的影響，但是現在還存在3倍圖4倍圖的情況，這個看實際開發公司需求。
4.背景圖片注意縮放問題。
/*在 iPhone8 下面*/
img{
/*原始圖片100*100px*/
width：50px；
height:50px;
}
.box{
/*原始圖片100*100px*/
background-size：50px 50px；
}
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
/*我們需要一個50*50像素 （css像素）的圖片 直接放到我們的iPhone8裏面會放大2倍 100*100
就會模糊 */
/* 我們採取的是放一個100*100 圖片 然後手動的把這個圖片 縮小爲 50*50 （css像素） */
/* 我們準備的圖片 比我們實際需要的大小 大2倍， 這就是 2倍圖 */
img:nth-child(2){
width: 50px;
height: 50px;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 模糊的 -->
<img src="iamges/apple50.jpg">
<!-- 我們採用2倍圖 -->
<img src="images/apple100.jpg">
</body>
</html>
網頁顯示：
3.背景縮放background-size
background-size 屬性規定背景圖像的尺寸。
background-size：背景圖片寬度，背景圖片高度；
1.單位： 長度|百分比|cover|contain；
2.cover把背景圖像擴展足夠大，以是背景圖像完全覆蓋背景區域。
3.contain把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
背景縮放命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
border: 2px solid red;
background: url(images/dog.jpg) no-repeat;
/* background-size: 圖片的寬度 圖片的高度; */
/* background-size: 500px 200px; */
/* 1.只寫一個參數 肯定是寬度 高度省略了 會等比例縮放 */
/* background-size: 500px; */
/* 2.裏面的單位可以跟% 相對於父盒子來說的 */
/* background-size: 50%; */
/* 3.cover 等比例拉伸 要完全覆蓋div盒子 可能有部分背景圖片顯示不全*/
/* background-size: cover; */
/* 4. contain 高度和寬度等比例拉伸 當寬度或者高度 鋪滿div盒子就不在進行拉伸了 可能有部分空白區域*/
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
網頁顯示圖：
背景圖片2倍圖命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1.我們有一個 50*50的盒子需要一個背景圖片，但是根據分析這個圖片還是要準備2倍， 100*100 */
/* 2.我們需要把這個圖片縮放一半，也就是 50*50 background-size */
div{
width: 50px;
height: 50px;
border: 1px solid red;
background: url(images/apple100.jpg) no-repeat;
background-size: 50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
網頁顯示圖：
