移動端適配 pt,px

2021-09-17 19:59:27 字數 732 閱讀 4331

pt:

邏輯畫素或邏輯解析度

相當於我們用瀏覽器模擬除錯移動端時看到的各手機的畫素,如下圖iphone6看到的寬高375*667,

這個就是邏輯畫素,也可以看做是乙個長度單位:

物理畫素或物理解析度,又被稱為裝置畫素

下圖的750*1334就是物理畫素,它不能看做是乙個長度單位,可以看做是乙個點,即畫素點

結論:

pt和px的關係就是—— 1pt 裡面有幾個 畫素點,下圖的reader就是反應它們之間的比例,即 pt 和 px為1:2

還是拿iphone6舉例,下圖 pt 寬高是375667,px 寬高是7501334,px的寬高是pt的2倍,所以這裡的reader關係是@2x,也就

是2倍所以為什麼設計稿640px和750px要除以2,就是因為設計師給的640px和750px是物理畫素

而我們在瀏覽器模擬除錯移動端的時候看到的畫素是邏輯畫素。

移動端適配

js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...

移動端適配

不論裝置寬度是多少,統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大,都看作375px。width只能改變布局視口,不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...

移動端適配

無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...