移動端布局（1）

移動端和pc端開發差異比較大的就是螢幕了，這裡說的差異主要體現在移動端大螢幕碎片化，各種尺寸和各種解析度的機型非常多，所以，移動端需要解決的問題就是如何去適配各種螢幕尺寸，後面我們有單獨章節來講如何適配，在這裡需要先科普一些基礎知識

1.什麼是螢幕尺寸？

螢幕的尺寸指的是對角線的長度，單位一般用英吋

2.什麼是解析度？

解析度指的是螢幕水平和垂直方向上畫素點的個數，一般用px來做單位，比如：移動端解析度19201080就表示水平方向上有1080個px，垂直方向上有1920個px，在pc端有點不一樣，pc端的19201080，表示的是水平方向有1920個畫素，垂直方向有1080個畫素點

畫素密度表示螢幕每英吋的畫素數量，畫素密度英文簡稱ppi(pixels per inch),這個概念是借鑑印刷行業中的dpi而來，dpi(dots per inch)表示印表機每英吋可以噴的墨汁點數，把這個墨汁點換成畫素點就可以了。dpi和ppi都可以被稱為畫素密度，但是ppi應用更廣泛

ppi如何計算？以iphone6為例，解析度是1334*750，尺寸是4.7英吋

根據勾股定理，我們可以計算出4.7英吋這條對角線上有多少個畫素點，然後把這個畫素點除以4.7英吋，就知道了每英吋上有多少個畫素點，計算出來的值就是ppi，我們通過js來計算

var ppi = math.sqrt(math.pow(1334, 2) + math.pow(750, 2)) / 4.7
console.log(ppi)

retina屏是什麼？retina屏又叫做視網膜屏，是蘋果註冊了的一種命名方式，指的是在正常視線距離內肉眼很難看到畫素的螢幕，一般手機螢幕達到300ppi就可以叫做retina螢幕

乙個物理畫素是螢幕上最小的物理顯示單元，在作業系統的排程下，每個裝置畫素都有自己的顏色值和亮度值，通常我們買手機的時候看的螢幕解析度引數就是物理畫素，比如：華為p30的解析度2340*1080，這裡指的是橫向有1080個物理畫素，垂直方向2340個物理畫素

裝置獨立畫素可以認為是計算機座標系統中的某乙個點，這個點代表乙個可以由程式使用的虛擬畫素,比如css畫素，相關的系統會把這個虛擬畫素轉換為物理畫素顯示，所以物理畫素和裝置獨立畫素之間是存在一種對應關係的

前面我們說到物理畫素和裝置獨立畫素之間存在一定的對應關係，這個物件關係就是裝置畫素比，簡稱dpr，它的公式為：

裝置畫素比 = 物理畫素/裝置獨立畫素

通俗的說裝置畫素比的作用就是用n個物理畫素區顯示乙個css畫素，舉個例子，dpr為1的時候，乙個物理畫素剛好對應乙個css畫素，dpr為2的時候，4個物理畫素對應乙個css畫素

1.谷歌自帶的除錯工具

2.真機除錯

一般選擇長期支援版本：

接下來我們需要用nodejs自帶的包管理工具，安裝好乙個伺服器，開啟命令列工具，輸入命令：

npm i live-server -g

這個伺服器安裝好以後，進入到你的專案目錄，然後執行命令：

live-server

服務啟動後，通過即可訪問到我的專案目錄，假如我的專案目錄下有個test.html的檔案，我現在要訪問這個test.html做除錯，那麼我需要訪問：test.html

以上步驟，只是讓我們在電腦上啟動了乙個伺服器來管理我們開發的專案，接下來需要連線真機測試，這個時候需要注意乙個關鍵的步驟，那就是讓手機和電腦連線在同乙個區域網內（同乙個wifi），這個時候ip段是一樣的才能訪問，舉個例子：我的電腦ip為：192.168.31.30，我只需要在手機端訪問：就可以開啟相應頁面了

視口可以理解為可視區視窗，就是瀏覽器顯示頁面內容的區域，在pc端我們基本上不會去提視口這個概念，預設情況下，視口就等於瀏覽器可視區視窗大小

pc端是以瀏覽器作為視口的，如果移動端也以瀏覽器作為視口就會比較窄，因此，引入布局視口、視覺視口、理想視口這些概念，讓移動端的視口和瀏覽器的寬度不再關聯

1.layout viewport,布局視口

在移動端視口並不和瀏覽器相關聯，而是重新定義了視口的概念，缺省會有乙個布局視口，css的布局會根據它來計算，並且約束它,

2.visual viewport,視覺視口

視覺視口是使用者正在看到的**的區域。使用者可以通過縮放來操作視覺視口，同時不會影響布局視口，布局視口仍保持原來的寬度。程式設計時可以不用管這個視口

3.ideal viewport,理想視口布局視口的預設寬度並不是乙個理想的寬度，所以蘋果公司引入了理想視口的概念

移動端布局的關鍵就是把布局視口設定成理想視口

4.視口設定

href="tel:13890908990"
href="mailto:[email protected]"

/* 清除高亮顏色 */ a,input,button /* 清除預設圓角 */ input, button /* 預設字型設定 */ body /* 禁止文字縮放 */

移動端布局（1）

移動端布局

移動端布局

移動端布局

相關推薦