- 首發：krissarea.gitee.io
- 作者：陳大魚頭
- github： KRISACHAN
在上一篇【Hello CSS】的第二章第二章-CSS的邏輯屬性與盒子模型中提了個問題：
為什麼Flex box跟Grid box的是以start、end為排列規則，而不是常規的top 、right 、bottom 跟left？
現在各位看官有答案了嗎？
因為上一篇中有提到過CSS 邏輯屬性的變革，從物理概念跳躍到了邏輯概念，也就是從top 、 right 、 bottom、 left更新為block、inline、start、 end。由於Flex box跟Grid box是CSS3的佈局模式，所以自然而然會使用更加適應於新時代的語言屬性。
上一篇主要介紹了CSS的邏輯屬性跟盒子模型的基本現狀。本篇則會介紹瀏覽器的檢視與座標。
關於裝置螢幕，我們應該知道的知識
畫素(Pixel)
畫素(pixel)是影像顯示的基本單位，一個畫素通常被視為影像的最小的完整取樣。用來表示一幅影像的畫素越多，結果更接近原始的影像。
我們看看下圖，圖中最小的點就是裝置的畫素。
解析度(Image resolution)
解析度(Image resolution)日常用語中之解析度多用於影像的清晰度。解析度越高代表影像質量越好，越能表現出更多的細節。
顯示解析度列表：zh.wikipedia.org/wiki/顯示解析度列…
下圖是不同解析度下的影像顯示
每英寸畫素(PPI)
每英寸畫素（英語：Pixels Per Inch，縮寫：PPI），又被稱為畫素密度，是一個表示列印影像或顯示器單位面積上畫素數量的指數。一般用於計量電子裝置螢幕的精細程度。通常情況下，每英寸畫素值越高，螢幕能顯示的影像也越精細。如上面解析度的圖顯示。
視網膜螢幕(Retina Display)
視網膜螢幕(Retina Display)是一種由蘋果公司設計和委託製造的螢幕。有研究表明，人類肉眼能夠分辨的最高PPI是300PPI，所以超過PPI超過300的往往被稱為Retina螢幕，這個概念是不對的，Retina螢幕指的是在人體正常使用距離下，無法用肉眼看到螢幕畫素的螢幕。
下圖為顯示了“地圖”二字的Retina螢幕
每英寸點數(DPI)
DPI（英語：Dots Per Inch，每英寸點數）是一個量度單位，用於點陣數位影像，意思是指每一英寸長度中，取樣或可顯示或輸出點的數目。如：印表機輸出可達600DPI的解析度，表示印表機可以在每一平方英寸的面積中可以輸出600X600＝360000個輸出點。
下圖為噴墨印表機以較低質量在約 0.25 平方英寸的範圍內按 150 dpi 列印的效果的特寫
裝置獨立畫素(DIP, DP)
裝置獨立畫素(Device Independent Pixels，DIP，又稱裝置無關畫素)是一種物理測量單位，基於計算機控制的座標系統和抽象畫素（虛擬畫素），是定義UI佈局時使用的虛擬畫素單位。
裝置畫素比(DPR)
裝置畫素比(DPR)是裝置上物理畫素和DIP的比例。公式如下：
window.devicePixelRatio = 物理畫素 / dips
複製程式碼CSS畫素(CSS Pixels)
CSS畫素(CSS Pixels)是WEB程式設計中誕生的概念，用於定於瀏覽器中每個模型不同CSS的值大小。由於CSS畫素（CSS Pixels）是個邏輯性的畫素，而非物理性的畫素，所以1個CSS畫素在不同裝置上大小可能會有不同。但即便是如此，對於CSS來說，還是希望在不同裝置上大小盡可能地看起來相同。
那麼這該如何實現呢？
參考畫素是裝置上一個畫素的視角，畫素密度為96dpi，離裝置長一臂。標準的手臂長度為28英尺，所以視角大概為0.0213度。對於臂長的讀數，1px應該為0.26mm（1/96 英尺）。
如下圖：
所以1px CSS畫素大小該是多少？
基於這個問題，W3C給出的答案如下：
對於CSS裝置而言，這些尺寸要麼錨定(i)通過將物理單元與其物理測量關聯起來，或者錨定(ii)通過將畫素單元與參考畫素關聯起來。對於列印介質和類似的高解析度裝置，錨單元應該是標準物理單位之一（像英尺，釐米等）。對於低解析度的裝置和具有不尋常觀看距離的裝置，建議將錨單元作為畫素大圓。對於此類裝置，建議畫素單元參考最接近參考畫素的裝置畫素的整數。
以上就是1px CSS畫素的定義。也合理的解釋了為什麼顯示裝置的物理尺寸與物理畫素不同，但是同樣CSS值的元素大小卻相差無幾了。這是因為不同裝置的px實現的參考錨點不同。
如果想知道不同裝置螢幕的具體差異，可以參考這個網站：uiiiuiii.com/screen/inde…
螢幕尺寸怎麼算？
首先我們可以知道1英寸=2.54CM，基本所有的螢幕都以對角線來衡量尺寸。
手機螢幕常見尺寸有：5、6、5.5、6.5、7
筆記本一般是：10、12、13、14、15、18、19
想知道自己螢幕的尺寸可以使用勾股定理：
如果想知道你的顯示器尺寸，可以參考這個網站：zh.infobyip.com/detectdispl…
魚頭注：關於CSS的單位值，會在後面的章節講解，有興趣的千萬不要錯過。
檢視
視口(viewport)
視口(viewport)代表當前可見的計算機圖形區域。在 Web 瀏覽器術語中，通常與瀏覽器視窗相同，但不包括瀏覽器的 UI， 選單欄等——即指你正在瀏覽的文件的那一部分。
在WEB開發中，視口(viewport) 是個很重要的概念，尤其在響應式網頁設計中是必備的。
-
通過上述一系列的名詞介紹，我們可以知道不同裝置的尺寸，解析度，CSS畫素大小都不盡相同，所以 視口(viewport) 的大小也就跟裝置相關。
-
在尺寸較大的裝置中，在這些裝置上，應用顯示區域不一定是全屏的，viewport 是瀏覽器視窗的大小。
- 在大多數移動裝置中，瀏覽器是全屏的，viewport 是整個螢幕的大小。
- 在全屏模式下，viewport 是裝置螢幕的範圍，視窗是瀏覽器視窗，瀏覽器視窗大小小於或等於視口的大小，並且文件是這個網站，文件的大小可比 viewport 長或寬。
如何設定文件viewport？
文件viewport可以通過三種方式進行設定：
HTML標籤
第一種方式就是在HTML的<head></head>中引入
<meta name="viewport" content="">
複製程式碼下面表格來自MDN
| Value | 可能值 | 描述 |
|---|---|---|
width |
一個正整數或者字串 device-width |
以pixels（畫素）為單位， 定義viewport（視口）的寬度。 |
height |
一個正整數或者字串 device-height |
以pixels（畫素）為單位， 定義viewport（視口）的高度。 |
initial-scale |
一個0.0 到10.0之間的正數 |
定義裝置寬度（縱向模式下的裝置寬度或橫向模式下的裝置高度）與視口大小之間的縮放比率。 |
maximum-scale |
一個0.0 到10.0之間的正數 |
定義縮放的最大值；它必須大於或等於minimum-scale的值，不然會導致不確定的行為發生。 |
minimum-scale |
一個0.0 到10.0之間的正數 |
定義縮放的最小值；它必須小於或等於maximum-scale的值，不然會導致不確定的行為發生。 |
user-scalable |
一個布林值（yes或者no） |
如果設定為no，使用者將不能放大或縮小網頁。預設值為yes。 |
魚頭注：具體的作用跟屬性會在後面的章節講解，有興趣的千萬不要錯過。
CSS偽類選擇器@viewport
@viewport規則讓我們可以對文件的大小進行設定 viewport。這個特性主要被用於移動裝置，但是也可以用在支援類似“固定到邊緣”等特性的桌面瀏覽器，如微軟的Edge。
按百分比計算尺寸的時候，就是參照的初始視口（viewport）。初始視口指的是任何使用者代理和樣式對它進行修改之前的視口。桌面瀏覽器如果不是全屏模式的話，一般是基於視窗大小。
在移動裝置上（或者桌面瀏覽器的全屏模式），初始視口通常就是應用程式可以使用的螢幕部分。它可能是全屏或者減去由作業系統或者其它應用程式所佔用的部分（例如狀態列）。
語法如下：
@viewport {
<group-rule-body>
}
複製程式碼描述符：
| 屬性值 | 描述 |
|---|---|
min-width |
設定viewport的最小寬度 |
max-width |
設定viewport的最大寬度 |
width |
同時設定 min-width 和 max-width |
min-height |
設定viewport的最小高度 |
max-height |
設定viewport的最大高度 |
height |
同時設定 min-height 和 max-height |
zoom |
設定初始縮放係數 |
min-zoom |
設定最小縮放係數 |
max-zoom |
設定最大縮放係數 |
user-zoom |
設定使用者是能更改縮放係數 |
orientation |
控制文件的方向 |
viewport-fit |
控制非矩形螢幕上文件的顯示。 |
據can_i_use顯示，相容性幾乎全線飆紅。
對於我們在移動裝置上常用的viewport設定
<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
這是一個只讀的實驗性的web api，目前只有**chrome 60 +跟Opera 47+**支援。
屬性如下：
{
height: 936, // 視覺視口高度，返回值為CSS畫素值。
offsetLeft: 0, // 視覺視口邊緣與佈局視口左邊的偏移量
offsetTop: 0, // 視覺視口邊緣與佈局視口頂邊的偏移量
onresize: null, // 視覺視口大小變化時觸發
onscroll: null, // 滾動視覺視口時觸發。
pageLeft: 0, // 視覺視口邊緣的初始化包含原點的X座標，返回值為CSS畫素值。
pageTop: 6680, // 視覺視口邊緣的初始化包含原點的Y座標，返回值為CSS畫素值。
scale: 1, // 返回值為視覺視口的縮放比例
width: 1364, // 視覺視口寬度，返回值為CSS畫素值。
}
複製程式碼座標系統
通過上述對裝置螢幕跟視口的介紹，我們應該可以對電子裝置中的瀏覽器顯示情況有了基本的瞭解。那麼接下來我們來了解一下瀏覽器中的座標系系統。
迪卡爾座標系
早在初中開始，我們就開始接觸一個非常重要的概念 —— 笛卡爾座標系。在數學裡，笛卡爾座標系（英語：Cartesian coordinate system），也稱直角座標系，是一種正交座標系。
下圖是數學概念中的平面座標系：
下圖是數學概念中的三維直角座標系：
圖上資訊就不作過多的解釋了，有需要詳細瞭解的可以參考zh.wikipedia.org/笛卡爾座標系
WEB中的座標系統
上面介紹的是我們數學概念中的座標系，在WEB頁面中，也有相應的座標系統。計演算法則也相仿，只是它和我們數學中的概念有點不一樣，就是原點位於瀏覽器的左上角。整個瀏覽器螢幕就是第一象限，表現上只有正值，負值都隱藏了起來。無論是平面座標還是三維座標都是如此，只不過由於瀏覽器螢幕是個平面，所以三維座標中的Z軸是貫穿瀏覽器的。
平面座標系的座標值可以看以下圖示與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>平面座標系</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地址：krissarea.gitee.io/blog/css/cs…
魚頭注：關於CSS 二維與三維的影像跟動畫會在後續的章節進行講解，有興趣的可以繼續關注本系列。
參考資料
【Hello CSS】系列
【Hello CSS】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地瞭解並且提高CSS在各位開發者心目中的地位。由於魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收穫，這就讓魚頭我喜不自勝了！
如果你也喜歡`CSS`，喜歡探討技術，或者對本文，本系列有任何的意見或建議，魚頭非常希望你能加入一個有趣的微信群 — “進擊的CSS”。你可以掃描下方二維碼，新增魚頭微信，新增時註明 “加群”，如果你覺得我的文章有趣，歡迎關注微信公眾號“魚頭的Web海洋”。衷心希望可以遇見你。
下一篇
第四章-HTML的標籤與語意