1.1 像素
1) 屏幕是由一個(gè)一個(gè)發(fā)光的小點(diǎn)構(gòu)成的，這個(gè)小點(diǎn)就是像素 2) 分辨率：1920*1080 ，這實(shí)質(zhì)上就是說(shuō)的小點(diǎn)的數(shù)量。 3) 在前端開(kāi)發(fā)中，像素分為兩種:即物理像素和CSS像素。 a) 物理像素：上述所說(shuō)的小點(diǎn)點(diǎn)就是物理像素。 b) CSS像素：編寫網(wǎng)頁(yè)時(shí)我們使用的像素就是CSS像素。 1) 瀏覽器在顯示網(wǎng)頁(yè)時(shí)，需要將CSS像素轉(zhuǎn)換為物理像素，再呈現(xiàn)頁(yè)面。 2) 一個(gè)CSS像素最終轉(zhuǎn)為為幾個(gè)物理像素，最終由瀏覽器決定。 默認(rèn)情況下，一個(gè)CSS像素 = 一個(gè)物理像素。
1.2 視口
+++ 視口（只看寬度，不看高度） 1) 視口就是屏幕中用來(lái)顯示網(wǎng)頁(yè)的區(qū)域。 2) 視口的大小可以等價(jià)于HTML標(biāo)簽的大小。CSS像素表示。 3) 視口的大小隨著瀏覽器的大小改變而改變。但是不會(huì)改變像素比。 4) 只有手動(dòng)設(shè)置視口的大小，才可以改變像素比。 1) 利用瀏覽器的縮放，可以改變像素比。 2) 手動(dòng)設(shè)置視口大小，改變像素比。 查看視口大?。?nbsp; 瀏覽器右鍵->檢查->計(jì)算樣式-> 查看html的大小
1.3 像素比
1) CSS像素/物理像素=像素比 2) 可以通過(guò)查看瀏覽器全屏的視口大小。來(lái)計(jì)算像素比 全屏視口大小/屏幕分辨率 = 像素比。 屏幕的分辨率指的是物理像素。 視口的大小指的的是CSS像素。(視口的大小等價(jià)于HTML標(biāo)簽的大小) 3) 只有手動(dòng)改變視口的大小，才會(huì)改變像素比。 像素比>1 ,意味著網(wǎng)頁(yè)縮小展示，像素比越小，網(wǎng)頁(yè)越小。 像素比<1,意味著網(wǎng)頁(yè)放大展示，像素比越大，網(wǎng)頁(yè)越大。
二、移動(dòng)端網(wǎng)頁(yè)
2.1 移動(dòng)端特性
1.默認(rèn)情況下，移動(dòng)端瀏覽PC端網(wǎng)頁(yè)都會(huì)將視口設(shè)置為980px。以確保PC端網(wǎng)頁(yè)在移動(dòng)端正常顯示。 2.如果網(wǎng)頁(yè)的寬度超過(guò)980，則移動(dòng)端的瀏覽器會(huì)自動(dòng)對(duì)網(wǎng)頁(yè)縮放以完整顯示網(wǎng)頁(yè)。 3.手機(jī)的物理像素一般為750px 。手機(jī)的像素點(diǎn)遠(yuǎn)遠(yuǎn)小于電腦的像素點(diǎn)。 在不同屏幕中，像素的大小是不同的，像素越小，屏幕越清晰。 電腦屏幕 24寸 1920px * 1080px (物理像素) 蘋果xxx手機(jī) 4.7寸 750px * 1334px (物理像素) 由上面可以看到手機(jī)的像素點(diǎn)遠(yuǎn)遠(yuǎn)小于電腦的像素點(diǎn)。
2.2 移動(dòng)端瀏覽PC端網(wǎng)頁(yè)，網(wǎng)頁(yè)會(huì)縮放展示
1. 移動(dòng)端瀏覽PC端沒(méi)有做適配的網(wǎng)頁(yè)，網(wǎng)頁(yè)會(huì)縮放展示。一般會(huì)看全整個(gè)網(wǎng)頁(yè)。 原因： 1) 默認(rèn)情況下，移動(dòng)端瀏覽PC端網(wǎng)頁(yè)都會(huì)將視口設(shè)置為980px。 此時(shí)像素比一般會(huì)<0，網(wǎng)頁(yè)會(huì)縮小展示。 2) 如果網(wǎng)頁(yè)的寬度超過(guò)980，則移動(dòng)端的瀏覽器會(huì)自動(dòng)對(duì)網(wǎng)頁(yè)縮放以完整顯示網(wǎng)頁(yè)。 3) 手機(jī)的像素點(diǎn)遠(yuǎn)遠(yuǎn)小于PC的像素點(diǎn)。
1）移動(dòng)端瀏覽PC端網(wǎng)頁(yè)，網(wǎng)頁(yè)會(huì)縮小展示
移動(dòng)端： 手機(jī)分辨率 750px (物理像素) 視口 980px (CSS像素) 像素比：980/750=1:0.7 相當(dāng)于一個(gè)css像素等價(jià)于0.7個(gè)物理像素。
2）案例
問(wèn)題：一個(gè)900px的盒子在手機(jī)中如何顯示?
900像素的盒子實(shí)質(zhì)上在手機(jī)上只占750px物理像素。所以導(dǎo)致非常小的展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width:900px;
height:900px;
background-color: red;
}
</style>
<body>
<div></div>
</body>
</html>網(wǎng)頁(yè)在移動(dòng)端會(huì)縮放展示。并且無(wú)溢出。 ( 由上圖可以看到900像素的盒子在手機(jī)中沒(méi)有溢出。) 原因： 手機(jī)像素：750px * 1334px (物理像素) 視口： 900px (CSS像素) 像素比：900/750=1/0.7 一個(gè)CSS像素等價(jià)于0.7個(gè)物理像素。 并且手機(jī)的像素點(diǎn)比電腦的像素點(diǎn)更小，所以網(wǎng)頁(yè)會(huì)縮放
2.3 為什么移動(dòng)端網(wǎng)頁(yè)需要專門編寫
1.默認(rèn)情況下，移動(dòng)端瀏覽PC端網(wǎng)頁(yè)，都會(huì)將視口設(shè)置為980px。以確保PC端網(wǎng)頁(yè)在移動(dòng)端正常使用。 不過(guò)由于像素比，PC端網(wǎng)頁(yè)一般都是縮放展示，不會(huì)有很好的體驗(yàn)。 像素比: 980/750=1/0.7。 即一個(gè)CSS像素=0.7個(gè)物理像素。所以會(huì)縮放展示。 2. 基于此移動(dòng)端網(wǎng)頁(yè)一般都是專門編寫。
三、設(shè)置完美視口
+++ 設(shè)置視口的作用 編寫移動(dòng)端網(wǎng)頁(yè)時(shí)，我們必須有一個(gè)合理的像素比。 設(shè)置視口，就可以調(diào)節(jié)像素比。即調(diào)節(jié)一個(gè)CSS像素占多少個(gè)物理像素。 這樣才能使網(wǎng)頁(yè)合理顯示。
3.1 手動(dòng)設(shè)置視口
可以通過(guò)meta標(biāo)簽調(diào)節(jié)視口大小： <meta name="viewport" content="width=1000px"> 設(shè)置視口大小為1000px。
1）移動(dòng)端瀏覽PC端網(wǎng)頁(yè)，一般默認(rèn)將視口設(shè)置為980px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width:900px;
height:900px;
background-color: red;
}
</style>
<body>
<div>
</div>
</body>
</html>2.）通過(guò)meta標(biāo)簽來(lái)設(shè)置視口。改變視口，就可以改變像素比。從而改變網(wǎng)頁(yè)的顯示方式
3.2 移動(dòng)端完美視口
1.不同設(shè)備的完美視口是不同的。 所以如果我們通過(guò)meta標(biāo)簽指定固定的視口。只能是適配某個(gè)設(shè)備，而不是通用。 2.完美視口 1.每一個(gè)移動(dòng)端設(shè)置時(shí)，都會(huì)有一個(gè)最佳的像素比。 一般我們只需要將網(wǎng)頁(yè)的視口設(shè)置為該值即可，就可以得到很好的效果。 2.將像素比設(shè)置為最佳像素比的視口大小，我們稱之為完美視口。 3.我們通過(guò)meta標(biāo)簽來(lái)指定完美視口。 3.為移動(dòng)端設(shè)置完美視口 <meta name="viewport" content="width=device-width, initial-scale=1.0">
