- 作者：陳大魚頭
- github： KRISACHAN
在上一篇【Hello CSS】的第二章第二章-CSS的邏輯屬性與盒子模型中提了個(gè)問題：
為什么Flex box跟Grid box的是以start、end為排列規(guī)則，而不是常規(guī)的top 、right 、bottom 跟left？
現(xiàn)在各位看官有答案了嗎？
因?yàn)樯弦黄杏刑岬竭^CSS 邏輯屬性的變革，從物理概念跳躍到了邏輯概念，也就是從top 、 right 、 bottom、 left更新為block、inline、start、 end。由于Flex box跟Grid box是CSS3的布局模式，所以自然而然會(huì)使用更加適應(yīng)于新時(shí)代的語言屬性。
上一篇主要介紹了CSS的邏輯屬性跟盒子模型的基本現(xiàn)狀。本篇?jiǎng)t會(huì)介紹瀏覽器的視圖與坐標(biāo)。
關(guān)于設(shè)備屏幕，我們應(yīng)該知道的知識(shí)
像素(Pixel)
像素(pixel)是影像顯示的基本單位，一個(gè)像素通常被視為影像的最小的完整取樣。用來表示一幅影像的像素越多，結(jié)果更接近原始的影像。
我們看看下圖，圖中最小的點(diǎn)就是設(shè)備的像素。
分辨率(Image resolution)
分辨率(Image resolution)日常用語中之分辨率多用于影像的清晰度。分辨率越高代表影像質(zhì)量越好，越能表現(xiàn)出更多的細(xì)節(jié)。
顯示分辨率列表：https://zh.wikipedia.org/wiki/顯示分辨率列表
下圖是不同分辨率下的圖像顯示
每英寸像素(PPI)
每英寸像素（英語：Pixels Per Inch，縮寫：PPI），又被稱為像素密度，是一個(gè)表示打印圖像或顯示器單位面積上像素數(shù)量的指數(shù)。一般用于計(jì)量電子設(shè)備屏幕的精細(xì)程度。通常情況下，每英寸像素值越高，屏幕能顯示的圖像也越精細(xì)。如上面分辨率的圖顯示。
視網(wǎng)膜顯示屏(Retina Display)
視網(wǎng)膜顯示屏(Retina Display)是一種由蘋果公司設(shè)計(jì)和委托制造的顯示屏。有研究表明，人類肉眼能夠分辨的最高PPI是300PPI，所以超過PPI超過300的往往被稱為Retina顯示屏，這個(gè)概念是不對(duì)的，Retina顯示屏指的是在人體正常使用距離下，無法用肉眼看到屏幕像素的顯示屏。
下圖為顯示了“地圖”二字的Retina顯示屏
每英寸點(diǎn)數(shù)(DPI)
DPI（英語：Dots Per Inch，每英寸點(diǎn)數(shù)）是一個(gè)量度單位，用于點(diǎn)陣數(shù)位影像，意思是指每一英寸長(zhǎng)度中，取樣或可顯示或輸出點(diǎn)的數(shù)目。如：打印機(jī)輸出可達(dá)600DPI的分辨率，表示打印機(jī)可以在每一平方英寸的面積中可以輸出600X600＝360000個(gè)輸出點(diǎn)。
下圖為噴墨打印機(jī)以較低質(zhì)量在約 0.25 平方英寸的范圍內(nèi)按 150 dpi 打印的效果的特寫
設(shè)備獨(dú)立像素(DIP, DP)
設(shè)備獨(dú)立像素(Device Independent Pixels，DIP，又稱設(shè)備無關(guān)像素)是一種物理測(cè)量單位，基于計(jì)算機(jī)控制的坐標(biāo)系統(tǒng)和抽象像素（虛擬像素），是定義UI布局時(shí)使用的虛擬像素單位。
設(shè)備像素比(DPR)
設(shè)備像素比(DPR)是設(shè)備上物理像素和DIP的比例。公式如下：
window.devicePixelRatio = 物理像素 / dips
CSS像素(CSS Pixels)
CSS像素(CSS Pixels)是WEB編程中誕生的概念，用于定于瀏覽器中每個(gè)模型不同CSS的值大小。由于CSS像素（CSS Pixels）是個(gè)邏輯性的像素，而非物理性的像素，所以1個(gè)CSS像素在不同設(shè)備上大小可能會(huì)有不同。但即便是如此，對(duì)于CSS來說，還是希望在不同設(shè)備上大小盡可能地看起來相同。
那么這該如何實(shí)現(xiàn)呢？
基于這個(gè)問題，W3C提出參考像素這個(gè)概念。定義如下：
參考像素是設(shè)備上一個(gè)像素的視角，像素密度為96dpi，離設(shè)備長(zhǎng)一臂。標(biāo)準(zhǔn)的手臂長(zhǎng)度為28英尺，所以視角大概為0.0213度。對(duì)于臂長(zhǎng)的讀數(shù)，1px應(yīng)該為0.26mm（1/96 英尺）。
如下圖：
所以1px CSS像素大小該是多少？
基于這個(gè)問題，W3C給出的答案如下：
對(duì)于CSS設(shè)備而言，這些尺寸要么錨定(i)通過將物理單元與其物理測(cè)量關(guān)聯(lián)起來，或者錨定(ii)通過將像素單元與參考像素關(guān)聯(lián)起來。對(duì)于打印介質(zhì)和類似的高分辨率設(shè)備，錨單元應(yīng)該是標(biāo)準(zhǔn)物理單位之一（像英尺，厘米等）。對(duì)于低分辨率的設(shè)備和具有不尋常觀看距離的設(shè)備，建議將錨單元作為像素大圓。對(duì)于此類設(shè)備，建議像素單元參考最接近參考像素的設(shè)備像素的整數(shù)。
以上就是1px CSS像素的定義。也合理的解釋了為什么顯示設(shè)備的物理尺寸與物理像素不同，但是同樣CSS值的元素大小卻相差無幾了。這是因?yàn)椴煌O(shè)備的px實(shí)現(xiàn)的參考錨點(diǎn)不同。
如果想知道不同設(shè)備屏幕的具體差異，可以參考這個(gè)網(wǎng)站：https://uiiiuiii.com/screen/index.htm
屏幕尺寸怎么算？
首先我們可以知道1英寸=2.54CM，基本所有的屏幕都以對(duì)角線來衡量尺寸。
手機(jī)屏幕常見尺寸有：5、6、5.5、6.5、7
筆記本一般是：10、12、13、14、15、18、19
想知道自己屏幕的尺寸可以使用勾股定理：
如果想知道你的顯示器尺寸，可以參考這個(gè)網(wǎng)站：https://zh.infobyip.com/detectdisplaysize.php
魚頭注：關(guān)于CSS的單位值，會(huì)在后面的章節(jié)講解，有興趣的千萬不要錯(cuò)過。
視圖
視口(viewport)
視口(viewport)代表當(dāng)前可見的計(jì)算機(jī)圖形區(qū)域。在 Web 瀏覽器術(shù)語中，通常與瀏覽器窗口相同，但不包括瀏覽器的 UI， 菜單欄等——即指你正在瀏覽的文檔的那一部分。
在WEB開發(fā)中，視口(viewport) 是個(gè)很重要的概念，尤其在響應(yīng)式網(wǎng)頁設(shè)計(jì)中是必備的。
通過上述一系列的名詞介紹，我們可以知道不同設(shè)備的尺寸，分辨率，CSS像素大小都不盡相同，所以 視口(viewport) 的大小也就跟設(shè)備相關(guān)。
在尺寸較大的設(shè)備中，在這些設(shè)備上，應(yīng)用顯示區(qū)域不一定是全屏的，viewport 是瀏覽器窗口的大小。
- 在大多數(shù)移動(dòng)設(shè)備中，瀏覽器是全屏的，viewport 是整個(gè)屏幕的大小。
- 在全屏模式下，viewport 是設(shè)備屏幕的范圍，窗口是瀏覽器窗口，瀏覽器窗口大小小于或等于視口的大小，并且文檔是這個(gè)網(wǎng)站，文檔的大小可比 viewport 長(zhǎng)或?qū)挕?/li>
如何設(shè)置文檔viewport？
文檔viewport可以通過三種方式進(jìn)行設(shè)置：
HTML標(biāo)簽
第一種方式就是在HTML的<head></head>中引入<meta name="viewport">
<meta name="viewport" content="">
下面表格來自MDN
| Value | 可能值 | 描述 |
|---|---|---|
width |
一個(gè)正整數(shù)或者字符串 device-width
|
以pixels（像素）為單位， 定義viewport（視口）的寬度。 |
height |
一個(gè)正整數(shù)或者字符串 device-height
|
以pixels（像素）為單位， 定義viewport（視口）的高度。 |
initial-scale |
一個(gè)0.0 到10.0之間的正數(shù)
|
定義設(shè)備寬度（縱向模式下的設(shè)備寬度或橫向模式下的設(shè)備高度）與視口大小之間的縮放比率。 |
maximum-scale |
一個(gè)0.0 到10.0之間的正數(shù)
|
定義縮放的最大值；它必須大于或等于minimum-scale的值，不然會(huì)導(dǎo)致不確定的行為發(fā)生。 |
minimum-scale |
一個(gè)0.0 到10.0之間的正數(shù) |
定義縮放的最小值；它必須小于或等于maximum-scale的值，不然會(huì)導(dǎo)致不確定的行為發(fā)生。 |
user-scalable |
一個(gè)布爾值（yes或者no） |
如果設(shè)置為no，用戶將不能放大或縮小網(wǎng)頁。默認(rèn)值為yes。 |
魚頭注：具體的<meta>作用跟屬性會(huì)在后面的章節(jié)講解，有興趣的千萬不要錯(cuò)過。
CSS偽類選擇器@viewport
@viewport規(guī)則讓我們可以對(duì)文檔的大小進(jìn)行設(shè)置 viewport。這個(gè)特性主要被用于移動(dòng)設(shè)備，但是也可以用在支持類似“固定到邊緣”等特性的桌面瀏覽器，如微軟的Edge。
按百分比計(jì)算尺寸的時(shí)候，就是參照的初始視口（viewport）。初始視口指的是任何用戶代理和樣式對(duì)它進(jìn)行修改之前的視口。桌面瀏覽器如果不是全屏模式的話，一般是基于窗口大小。
在移動(dòng)設(shè)備上（或者桌面瀏覽器的全屏模式），初始視口通常就是應(yīng)用程序可以使用的屏幕部分。它可能是全屏或者減去由操作系統(tǒng)或者其它應(yīng)用程序所占用的部分（例如狀態(tài)欄）。
語法如下：
@viewport {
<group-rule-body>
}
描述符：
| 屬性值 | 描述 |
|---|---|
min-width |
設(shè)置viewport的最小寬度 |
max-width |
設(shè)置viewport的最大寬度 |
width |
同時(shí)設(shè)置 min-width 和 max-width
|
min-height |
設(shè)置viewport的最小高度 |
max-height |
設(shè)置viewport的最大高度 |
height |
同時(shí)設(shè)置 min-height 和 max-height
|
zoom |
設(shè)置初始縮放系數(shù) |
min-zoom |
設(shè)置最小縮放系數(shù) |
max-zoom |
設(shè)置最大縮放系數(shù) |
user-zoom |
設(shè)置用戶是能更改縮放系數(shù) |
orientation |
控制文檔的方向 |
viewport-fit |
控制非矩形顯示屏上文檔的顯示。 |
據(jù)can_i_use顯示，兼容性幾乎全線飆紅。
對(duì)于我們?cè)谝苿?dòng)設(shè)備上常用的viewport設(shè)置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
就可以這么來寫
@viewport {
width: device-width;
zoom: 1.0;
min-zoom: 0.5;
max-zoom: 2.0;
user-zoom: zoom;
}
VisualViewport
這是一個(gè)只讀的實(shí)驗(yàn)性的web api，目前只有chrome 60 +跟Opera 47+支持。
屬性如下：
{
height: 936, // 視覺視口高度，返回值為CSS像素值。
offsetLeft: 0, // 視覺視口邊緣與布局視口左邊的偏移量
offsetTop: 0, // 視覺視口邊緣與布局視口頂邊的偏移量
onresize: null, // 視覺視口大小變化時(shí)觸發(fā)
onscroll: null, // 滾動(dòng)視覺視口時(shí)觸發(fā)。
pageLeft: 0, // 視覺視口邊緣的初始化包含原點(diǎn)的X坐標(biāo)，返回值為CSS像素值。
pageTop: 6680, // 視覺視口邊緣的初始化包含原點(diǎn)的Y坐標(biāo)，返回值為CSS像素值。
scale: 1, // 返回值為視覺視口的縮放比例
width: 1364, // 視覺視口寬度，返回值為CSS像素值。
}
坐標(biāo)系統(tǒng)
通過上述對(duì)設(shè)備屏幕跟視口的介紹，我們應(yīng)該可以對(duì)電子設(shè)備中的瀏覽器顯示情況有了基本的了解。那么接下來我們來了解一下瀏覽器中的坐標(biāo)系系統(tǒng)。
迪卡爾坐標(biāo)系
早在初中開始，我們就開始接觸一個(gè)非常重要的概念 —— 笛卡爾坐標(biāo)系。在數(shù)學(xué)里，笛卡爾坐標(biāo)系（英語：Cartesian coordinate system），也稱直角坐標(biāo)系，是一種正交坐標(biāo)系。
下圖是數(shù)學(xué)概念中的平面坐標(biāo)系：
下圖是數(shù)學(xué)概念中的三維直角坐標(biāo)系：
圖上信息就不作過多的解釋了，有需要詳細(xì)了解的可以參考https://zh.wikipedia.org/笛卡爾坐標(biāo)系
WEB中的坐標(biāo)系統(tǒng)
上面介紹的是我們數(shù)學(xué)概念中的坐標(biāo)系，在WEB頁面中，也有相應(yīng)的坐標(biāo)系統(tǒng)。計(jì)算法則也相仿，只是它和我們數(shù)學(xué)中的概念有點(diǎn)不一樣，就是原點(diǎn)位于瀏覽器的左上角。整個(gè)瀏覽器屏幕就是第一象限，表現(xiàn)上只有正值，負(fù)值都隱藏了起來。無論是平面坐標(biāo)還是三維坐標(biāo)都是如此，只不過由于瀏覽器屏幕是個(gè)平面，所以三維坐標(biāo)中的Z軸是貫穿瀏覽器的。
平面坐標(biāo)系的坐標(biāo)值可以看以下圖示與DEMO：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-siteapp">
<title>平面坐標(biāo)系</title>
<style>
html,
body,
div {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.poinerPosition {
font-size: 2vw;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="poinerPosition" class="poinerPosition"></div>
<script>
'use strict';
window.addEventListener('pointermove', PointerEvent => {
const {
x,
y,
} = PointerEvent;
poinerPosition.innerHTML = `
(${x}, ${y})
`;
poinerPosition.style.left = `${x + 20}px`;
poinerPosition.style.top = `${y}px`;
});
</script>
</body>
</html>
DEMO地址：https://krissarea.gitee.io/blog/css/css-ccs.html
魚頭注：關(guān)于CSS 二維與三維的圖像跟動(dòng)畫會(huì)在后續(xù)的章節(jié)進(jìn)行講解，有興趣的可以繼續(xù)關(guān)注本系列。
參考資料
設(shè)備像素比devicePixelRatio簡(jiǎn)單介紹
在移動(dòng)瀏覽器中使用viewport元標(biāo)簽控制布局
【Hello CSS】系列
【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發(fā)者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發(fā)現(xiàn)有任何不合理，不正確的地方，還煩不吝指出，我會(huì)非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！
