資訊專欄INFORMATION COLUMN
摘要：最近在研究屏的適配問題，在具體方案討論之前，陸續(xù)做了一些理解筆記，現(xiàn)歸納如下。
最近在研究 Retina 屏的適配問題，在具體方案討論之前，陸續(xù)做了一些理解筆記，現(xiàn)歸納如下。具體方案的討論將另作文章。
中的 viewport 是布局視口
initial-scale 等的縮放是基于理想視口的
理想視口由設(shè)備各自提供，理想視口的寬度也是設(shè)備的獨(dú)立像素
所謂“獨(dú)立”是說這個設(shè)備獨(dú)立像素和像素密度無關(guān)
Retina屏增加了設(shè)備像素（物理像素），所以物理像素是有密度變化的
dpr = 物理像素/設(shè)備獨(dú)立像素 = 設(shè)備像素個數(shù)/設(shè)備理想視口寬度
dpr 在 JavaScript 中可以通過 window.devicePixelRatio 獲取，在 CSS Media Query 中的名稱是 device-pixel-ratio
CSS像素和物理像素有區(qū)別，當(dāng)1個CSS像素跨越更多物理像素時，就模糊了，反之則清晰，CSS像素被用在布局視口上
縮放可以調(diào)整CSS像素和物理像素之間的比例關(guān)系。高清屏的縮放方案就是：如將布局視口擴(kuò)大為理想視口的2倍，即理想視口縮放比例為1/2，那么CSS像素將比以前跨越更少的物理像素，從而保證清晰度
布局視口/理想視口 = CSS像素/設(shè)備獨(dú)立像素 = 1/縮放比例
物理像素/設(shè)備獨(dú)立像素 = dpr
頁面清晰要求 —— CSS像素/物理像素 = 1
故 —— 縮放比例 = 1/dpr
從以下的關(guān)系比中來認(rèn)知：
布局視口(CSS像素) : 設(shè)備獨(dú)立像素(理想視口) : 物理像素
設(shè)備獨(dú)立像素可以被看做一個中間件：
當(dāng) dpr=1 時，設(shè) initial-scale=1.0，布局視口等于設(shè)備獨(dú)立像素，設(shè)備獨(dú)立像素等于物理像素，故布局視口等于物理像素，1CSS像素跨1物理像素
當(dāng) dpr=2 時，設(shè) initial-scale=1.0，布局視口等于設(shè)備獨(dú)立像素，設(shè)備獨(dú)立像素是物理像素的一半，故布局視口是物理像素的一半，1CSS像素跨4物理像素
當(dāng) dpr=2 時，設(shè) initial-scale=0.5，布局視口是設(shè)備獨(dú)立像素的兩倍，設(shè)備獨(dú)立像素是物理像素的一半，故布局視口等于設(shè)備像素，1CSS像素跨1物理像素
再來研究高清屏，以下均設(shè)：設(shè)備獨(dú)立像素是 375px，dpr=2，物理像素則是 750px，元素DIV div{width: 375px}：
initial-scale=1.0 時，1CSS像素跨越4物理像素，故 DIV 是滿屏的
initial-scale=0.5 時，1CSS像素跨越1物理像素，故 DIV 只占屏幕的一半，要想同樣保持全屏，就需要把 DIV 改為 div{width: 750px}
所以，對于圖來說，第一種情況下普通圖片就會拉伸，從而模糊；第二種情況，就是使用高清圖
為不同屏幕的元素設(shè)置不同的像素單位過于麻煩，開發(fā)者就需要考慮是否有跨屏幕的尺寸單位解決方案
rem：當(dāng)普通屏?xí)r，設(shè) :root{font-size: 10px}，則 37.5rem 是 375px；高清屏?xí)r，設(shè) :root{font-size: 20px}，則 37.5rem 是 750px，因此，我們在 DIV 元素上只需要設(shè)置一個 37.5rem，在不同屏幕下更改根元素的字體大小，就可以兼容所有屏幕了
vw 和 wh：相對于布局視口大小計算尺寸，普通屏布局視口是 375px，高清屏是 750px，無論怎么變，vw/vh 單位的最后結(jié)果都會相應(yīng)變化
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115182.html
摘要：真的是給我們新手學(xué)習(xí)移動端適配造成不少困惑英語真的很重要呀。細(xì)節(jié)高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
摘要：真的是給我們新手學(xué)習(xí)移動端適配造成不少困惑英語真的很重要呀。細(xì)節(jié)高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。 一次搞清楚移動端這幾個坑爹的單位慨念 目錄: 一、讓坑爹的單位,不再坑爹 二、需要準(zhǔn)備什么樣的設(shè)計稿 三、rem方案的原理和細(xì)節(jié) 高清屏上,位圖的處理 高清屏上,關(guān)于border: 1px的處理 移動端屏幕的自動適配的處理 移動端屏幕上字體大小的處理...
摘要：一思考在移動端越來越重要的背景下，每位開發(fā)者對移動適配都有自己的想法。這個和移動端的設(shè)計體驗方式是比較像的。對移動端的特殊性進(jìn)行適配，如問題，默認(rèn)樣式等。 一、思考 在移動端越來越重要的背景下，每位web開發(fā)者對移動適配都有自己的想法。是移動優(yōu)先，還是PC優(yōu)先，還是兩者兼得？在實際開發(fā)中這個問題是和項目產(chǎn)品定位有關(guān)的，也涉及到UI的設(shè)計，不是開發(fā)者能決定。但不管產(chǎn)品如何定位，作為開發(fā)...
閱讀 3197·2021-11-10 11:36
閱讀 3145·2021-11-02 14:39
閱讀 1726·2021-09-26 10:11
閱讀 4928·2021-09-22 15:57
閱讀 1685·2021-09-09 11:36
閱讀 2053·2019-08-30 12:56
閱讀 3487·2019-08-30 11:17
閱讀 1701·2019-08-29 17:17
