摘要:首先屏幕是由一個(gè)一個(gè)顯示單元組成的每一個(gè)顯示單元都是物理世界真實(shí)存在的把一個(gè)顯示單元的大小稱為一個(gè)物理像素通常我們所說的分辨率就是指一塊屏幕顯示單元的個(gè)數(shù)比如叉表示這塊屏幕由叉?zhèn)€顯示單元組成其次通常情況下個(gè)顯示單元對應(yīng)計(jì)算機(jī)系統(tǒng)中的也就是說
首先
屏幕是由一個(gè)一個(gè)顯示單元組成的.
1 每一個(gè)顯示單元都是物理世界真實(shí)存在的;
2 把一個(gè)顯示單元的大小稱為一個(gè)"物理像素";
3 通常我們所說的 "分辨率", 就是指一塊屏幕顯示單元的個(gè)數(shù), 比如 750 叉 1334, 表示這塊屏幕由 750叉1334 個(gè)顯示單元組成
通常情況下, 1 個(gè)顯示單元對應(yīng) 計(jì)算機(jī)系統(tǒng)中的 1px.
也就是說, 如果你設(shè)置了一個(gè)元素的 height:100px; 在屏幕中會(huì)有 100個(gè)顯示單元來渲染它.
后來出現(xiàn)了一種情況
在相同大小的屏幕下,
屏幕分辨率不一樣, 一個(gè)分辨率是 A, 而另外一個(gè)分辨率是 2A --- 因?yàn)槲覀兛梢园扬@示單元做的更小了
這種情況的出現(xiàn), 有如下的影響
如果我們維持著: 計(jì)算機(jī)系統(tǒng)中的 1px, 對應(yīng)物理上的 1個(gè)顯示單元.
那么同樣一個(gè)頁面, 在 A 顯示正常, 在 2A 的情景下面, 就只會(huì)顯示一半.
這種情況肯定是不可以的.所以我們需要針對這種情況做處理: 瀏覽器提供了一個(gè) devicePixelRatio(設(shè)備像素比) 的屬性, 用來標(biāo)記:
標(biāo)準(zhǔn)顯示單元的大小/當(dāng)前設(shè)備的顯示單元的大小
并且明確兩條規(guī)則:
1px 始終對應(yīng) 1個(gè)顯示單元
標(biāo)準(zhǔn)的 1個(gè)顯示單元大小為 x, 其他的顯示單元, 可能是 1/2x, 1/3x
我們可以通過判斷這個(gè)值, 來調(diào)整我們使用的 px 的大小,
比如:
devicePixelRatio = 1 的設(shè)備中, 元素a 的寬度為 100px; devicePixelRatio = 2 的設(shè)備中, 元素a 的寬度為 200px;
ok, 那么我們來搞.
根據(jù)不同的 devicePixelRatio 來調(diào)整元素的樣式.
var box = document.querySelector(".box"); var height = parseInt(getComputedStyle(box).height); var width = parseInt(getComputedStyle(box).width); box.style.height = height * parseInt(window.devicePixelRatio) + "px"; box.style.width = width * parseInt(window.devicePixelRatio) + "px";
這僅僅是一個(gè)元素的兩個(gè)屬性, 1000個(gè)元素, 每個(gè)元素 5 個(gè)屬性, 就可以讓你哭掉了.
所以這種處理方式肯定是不可以的.
然后我們發(fā)現(xiàn)了 rem 單位.
它的簡單解釋:
當(dāng)你給某個(gè)元素A 設(shè)置了 height:2rem 的時(shí)候 它會(huì)找到根節(jié)點(diǎn)(html) 的 font-size 值, 比如是 16px 然后拿 16 * 2 = 32px 作為元素A 的最終 height.
這個(gè)就可以利用了
讓元素使用 rem 作單位
然后控制根元素的 font-size 值, 在不同的 devicePixelRatio 下面的時(shí)候, 呈現(xiàn)不同的值
比如: devicePixelRatio = 1, font-size(root) = 100px; devicePixelRatio = 2, font-size(root) = 200px;
元素在這個(gè)時(shí)候, 就會(huì)自動(dòng)響應(yīng)大小的變化.
好, 開始搞:
var fontSize = 100 * parseInt(window.devicePixelRatio) + "px"; document.documentElement.style.fontSize = fontSize;
嗯, 結(jié)果還是不錯(cuò)的, 在不同的分辨率下面, 我們也能實(shí)現(xiàn)頁面相同了.
然后你會(huì)總是覺得, pc 上面的 100px, 和你 devicePixelRatio=2 的時(shí)候的 200px
的大小不一致的, 按道理來說應(yīng)該是一致的.
的確不一致.
先明確一個(gè)概念
瀏覽器可視區(qū)域(visual viewport)
我們之前說了 "計(jì)算機(jī)系統(tǒng)中的 1px 始終對應(yīng) 1個(gè)物理顯示單元"
那么對應(yīng) 750*1334 分辨率的屏幕, 我們同樣可以這么描述它:
屏幕的大小為 750px*1334px.
前面已經(jīng)說過了, 相同物理尺寸的屏幕, 分辨率可能不同, 因?yàn)轱@示單元的個(gè)數(shù)不同.
所以這里的 750px, 可能僅僅是標(biāo)準(zhǔn)下面的 375px;
另外一個(gè)概念:ideal viewport
它表示的是說:
當(dāng)前設(shè)備, 使用標(biāo)準(zhǔn)顯示單元為單位的時(shí)候的大小.
比如說 750*x 的分辨率, devicePixelRatio = 2,
那么它在標(biāo)準(zhǔn)顯示單元下面, 寬度就是 375px * x/2
最后我們提一下 layout viewport, 這是為什么大小不一致的原因:
歷史:
從 iPhone 發(fā)布前夕說起, 開發(fā)人員發(fā)現(xiàn), 原本為 pc 開發(fā)的網(wǎng)頁 在 iPhone 上面顯示不全, 這部分可以通過滾動(dòng)條來解決. 但是使用 百分比布局的頁面就坑爹了, 原本在 pc 端瀏覽器上擁有 的 20% 在 iPhone 上面就一點(diǎn)點(diǎn)了, 布局完全亂了, 坑啊. 為了解決這個(gè)問題, 開發(fā)人員提出了一個(gè)的新的概念: "layout viewport"
layout viewport的默認(rèn)大小為 980px, 并且默認(rèn)縮放到和 visual viewport 區(qū)域一般大小.
在這種情況下, 我們可以計(jì)算出layout viewport下,
一個(gè) 100px 寬度的元素, 對應(yīng)的 visual viewport 下面的寬度 x
layout viewport / visual viewport = ele-width(layout viewport) / x
也就是
x = ele-width(layout viewport) * (layout viewport / visual viewport);
ideal viewport 下面的寬度, 只要再除以 devicePixelRatio 即可.
很明顯的看出來:
width(layout viewport) = width(visual viewport) 的時(shí)候, 兩個(gè) viewport 中的元素寬度值
是相等的.
width(visual viewport) / devicePixelRatio = ideal viewport 中的元素的大小.
而我們的最終追求, 就是
當(dāng)你寫下 100px 的時(shí)候, 在任何 devicePixelRatio 下面的大小都是一致的.
要做到這一點(diǎn), 就要做到它們的 ideal viewport 下面的大小始終一致的.
而一個(gè)元素在 ideal viewport 下的大小的計(jì)算公式為:
( ele-width(layout viewport) * (layout viewport / visual viewport) ) / devicePixelRatio;
因?yàn)椴煌脑O(shè)備的 visual viewport 的值是不同的, 我們可以控制讓 layout viewport 的大小始終
等于 visual viewport, 這樣比例始終為 1
devicePixelRatio 在不同的設(shè)備中有不同
假設(shè) ele-width(ideal viewport) = x; devicePixelRatio = n; 那么 ele-width(layout viewport) = nx;
所以我們只要保證, ele-width 的寬度, 始終為 nx 即可, 因?yàn)橥ǔG闆r下我們是知道 x 的.
how?
控制 layout viewport 的大小始終等于 visual viewport
通過 meta name="viewport" 的 content 的 initial-scale 來控制.
initial-scale = 1 , layout viewport 的寬度為 375 (同ideal viewport) initial-scale = 2 , layout viewport 的寬度為 188 initial-scale = 0.5, layout viewport 的寬度為 750;
所以得到的結(jié)論:
當(dāng) initial-scale 的值為 1/devicePixelRatio 的時(shí)候, width(layout viewport) = width(visual viewport)
2 通過 rem, 以及根據(jù)不同的 devicePixelRatio 設(shè)置 根節(jié)點(diǎn)的 font-size 值, 來控制 nx 的值的大小.
然后需要給出一份基準(zhǔn)值:
在 750(visual viewport), devicePixelRatio = 2 的時(shí)候, root(font-size) = 200px;
如果都做到這里了, 那么至少可以達(dá)到:
在不同的 devicePixelRatio 下面元素的大小都是一致的.
但是依舊存在一個(gè)問題, 當(dāng)前頁面是基于 750 (visual viewport) 定義的, 也就是說
當(dāng)你的設(shè)備實(shí)際上只有 640(visual viewport) 的時(shí)候,
你的整個(gè)頁面還是 750px, 就會(huì)出現(xiàn)滾動(dòng)條.
所以我們想要等比縮放一下.
如何操作?
直接等比縮放一下 root(font-size) 的值:
750/200 = 640/x x = 640 / (750 / 200)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/112138.html
摘要:為移動(dòng)設(shè)備制作前端頁面,往往會(huì)遇到很多令人迷惑的情況,本文中,我整理了一些相關(guān)的概念和方法,與大家分享一下。所以現(xiàn)代針對移動(dòng)端的網(wǎng)頁設(shè)計(jì)或者響應(yīng)式設(shè)計(jì)通常采用的方法是,精簡頁面內(nèi)容,放大視覺元素,避免體驗(yàn)不好的縮放和移動(dòng)頁面。 為移動(dòng)設(shè)備制作前端頁面,往往會(huì)遇到很多令人迷惑的情況,本文中,我整理了一些相關(guān)的概念和方法,與大家分享一下。 設(shè)備像素和CSS像素 css像素是固定不變的...
摘要:為移動(dòng)設(shè)備制作前端頁面,往往會(huì)遇到很多令人迷惑的情況,本文中,我整理了一些相關(guān)的概念和方法,與大家分享一下。所以現(xiàn)代針對移動(dòng)端的網(wǎng)頁設(shè)計(jì)或者響應(yīng)式設(shè)計(jì)通常采用的方法是,精簡頁面內(nèi)容,放大視覺元素,避免體驗(yàn)不好的縮放和移動(dòng)頁面。 為移動(dòng)設(shè)備制作前端頁面,往往會(huì)遇到很多令人迷惑的情況,本文中,我整理了一些相關(guān)的概念和方法,與大家分享一下。 設(shè)備像素和CSS像素 css像素是固定不變的...
摘要:目錄移動(dòng)端開發(fā)的基本觀點(diǎn)像素基礎(chǔ)知識原理解析彈性布局響應(yīng)式設(shè)計(jì)的運(yùn)用移動(dòng)端的事件庫的使用移動(dòng)端開發(fā)的基本觀點(diǎn)移動(dòng)端開發(fā)的意義移動(dòng)端用戶使用量市場需求市場供給公司需要移動(dòng)端開發(fā)人才工資高,就業(yè)易涌現(xiàn)大波程序猿到了猴年馬月,工資才會(huì) 目錄 移動(dòng)端開發(fā)的基本觀點(diǎn) 像素基礎(chǔ)知識 viewport原理解析 彈性布局 響應(yīng)式設(shè)計(jì) 1rem的運(yùn)用 移動(dòng)端的事件 zepto庫的使用 移動(dòng)端開發(fā)的...
摘要:目錄移動(dòng)端開發(fā)的基本觀點(diǎn)像素基礎(chǔ)知識原理解析彈性布局響應(yīng)式設(shè)計(jì)的運(yùn)用移動(dòng)端的事件庫的使用移動(dòng)端開發(fā)的基本觀點(diǎn)移動(dòng)端開發(fā)的意義移動(dòng)端用戶使用量市場需求市場供給公司需要移動(dòng)端開發(fā)人才工資高,就業(yè)易涌現(xiàn)大波程序猿到了猴年馬月,工資才會(huì) 目錄 移動(dòng)端開發(fā)的基本觀點(diǎn) 像素基礎(chǔ)知識 viewport原理解析 彈性布局 響應(yīng)式設(shè)計(jì) 1rem的運(yùn)用 移動(dòng)端的事件 zepto庫的使用 移動(dòng)端開發(fā)的...
摘要:註在這篇文章中我們只考慮和為等比例的情況。最後實(shí)做出來的功能會(huì)像這樣子實(shí)做拖曳與縮放瞭解中的和在的世界中,空間的概念可以分成和兩個(gè)部分。實(shí)際感受的效果在她所撰寫文章中提供了非常好的實(shí)做案例。這個(gè)座標(biāo)系統(tǒng)是相對固定的。 理解 SVG 中的 Viewport 和 ViewBox - 實(shí)做縮放(zoom)和拖曳(drag)效果 本文章同步刊載於 PJCHENder 前端網(wǎng)頁資源站 不同於以往...
摘要:註在這篇文章中我們只考慮和為等比例的情況。最後實(shí)做出來的功能會(huì)像這樣子實(shí)做拖曳與縮放瞭解中的和在的世界中,空間的概念可以分成和兩個(gè)部分。實(shí)際感受的效果在她所撰寫文章中提供了非常好的實(shí)做案例。這個(gè)座標(biāo)系統(tǒng)是相對固定的。 理解 SVG 中的 Viewport 和 ViewBox - 實(shí)做縮放(zoom)和拖曳(drag)效果 本文章同步刊載於 PJCHENder 前端網(wǎng)頁資源站 不同於以往...
閱讀 919·2021-11-23 09:51
閱讀 1146·2021-11-15 17:57
閱讀 1693·2021-09-22 15:24
閱讀 836·2021-09-07 09:59
閱讀 2258·2019-08-29 15:10
閱讀 1873·2019-08-29 12:47
閱讀 785·2019-08-29 12:30
閱讀 3401·2019-08-26 13:51