摘要：本篇?jiǎng)t會(huì)介紹瀏覽器的視圖與坐標(biāo)。返回值為視覺視口的縮放比例視覺視口寬度，返回值為像素值。那么接下來我們來了解一下瀏覽器中的坐標(biāo)系系統(tǒng)。在數(shù)學(xué)里，笛卡爾坐標(biāo)系英語，也稱直角坐標(biāo)系，是一種正交坐標(biāo)系。

作者：陳大魚頭
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)。

像素(pixel)是影像顯示的基本單位，一個(gè)像素通常被視為影像的最小的完整取樣。用來表示一幅影像的像素越多，結(jié)果更接近原始的影像。

我們看看下圖，圖中最小的點(diǎn)就是設(shè)備的像素。

分辨率(Image resolution)日常用語中之分辨率多用于影像的清晰度。分辨率越高代表影像質(zhì)量越好，越能表現(xiàn)出更多的細(xì)節(jié)。

顯示分辨率列表：https://zh.wikipedia.org/wiki/顯示分辨率列表

下圖是不同分辨率下的圖像顯示

每英寸像素（英語：Pixels Per Inch，縮寫：PPI），又被稱為像素密度，是一個(gè)表示打印圖像或顯示器單位面積上像素?cái)?shù)量的指數(shù)。一般用于計(jì)量電子設(shè)備屏幕的精細(xì)程度。通常情況下，每英寸像素值越高，屏幕能顯示的圖像也越精細(xì)。如上面分辨率的圖顯示。

視網(wǎng)膜顯示屏(Retina Display)是一種由蘋果公司設(shè)計(jì)和委托制造的顯示屏。有研究表明，人類肉眼能夠分辨的最高PPI是300PPI，所以超過PPI超過300的往往被稱為Retina顯示屏，這個(gè)概念是不對(duì)的，Retina顯示屏指的是在人體正常使用距離下，無法用肉眼看到屏幕像素的顯示屏。

下圖為顯示了“地圖”二字的Retina顯示屏

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ú)立像素(Device Independent Pixels，DIP，又稱設(shè)備無關(guān)像素)是一種物理測(cè)量單位，基于計(jì)算機(jī)控制的坐標(biāo)系統(tǒng)和抽象像素（虛擬像素），是定義UI布局時(shí)使用的虛擬像素單位。

設(shè)備像素比(DPR)是設(shè)備上物理像素和DIP的比例。公式如下：

window.devicePixelRatio = 物理像素 / dips

CSS像素(CSS Pixels)是WEB編程中誕生的概念，用于定于瀏覽器中每個(gè)模型不同CSS的值大小。由于CSS像素（CSS Pixels）是個(gè)邏輯性的像素，而非物理性的像素，所以1個(gè)CSS像素在不同設(shè)備上大小可能會(huì)有不同。但即便是如此，對(duì)于CSS來說，還是希望在不同設(shè)備上大小盡可能地看起來相同。

基于這個(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 英尺）。

如下圖：

基于這個(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)代表當(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ū)挕?/p> 如何設(shè)置文檔viewport？

文檔viewport可以通過三種方式進(jìn)行設(shè)置：

第一種方式就是在HTML的中引入

下面表格來自MDN

魚頭注：具體的作用跟屬性會(huì)在后面的章節(jié)講解，有興趣的千萬不要錯(cuò)過。

@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 {
    
}

描述符：

據(jù)can_i_use顯示，兼容性幾乎全線飆紅。

對(duì)于我們?cè)谝苿?dòng)設(shè)備上常用的viewport設(shè)置

就可以這么來寫

@viewport {
    width: device-width;
    zoom: 1.0;
    min-zoom: 0.5;
    max-zoom: 2.0;
    user-zoom: zoom;
}

首先我們看Window.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像素值。
}

通過上述對(duì)設(shè)備屏幕跟視口的介紹，我們應(yīng)該可以對(duì)電子設(shè)備中的瀏覽器顯示情況有了基本的了解。那么接下來我們來了解一下瀏覽器中的坐標(biāo)系系統(tǒng)。

早在初中開始，我們就開始接觸一個(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)系

上面介紹的是我們數(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：

DEMO地址：https://krissarea.gitee.io/blog/css/css-ccs.html

魚頭注：關(guān)于CSS 二維與三維的圖像跟動(dòng)畫會(huì)在后續(xù)的章節(jié)進(jìn)行講解，有興趣的可以繼續(xù)關(guān)注本系列。

你真的了解css像素嘛？

什么是CSS像素？什么是參考像素？

devicepixelrati

設(shè)備像素比devicePixelRatio簡(jiǎn)單介紹

W3C

分辨率

像素

視網(wǎng)膜顯示屏

每英寸像素

每英寸點(diǎn)數(shù)

在移動(dòng)瀏覽器中使用viewport元標(biāo)簽控制布局

Visual Viewport API

視口概念

VisualViewport

meta

Window.visualViewport

@viewport

[[CSS] 淺談 @viewport 與 @media](https://blog.hinablue.me/view...

【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發(fā)者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發(fā)現(xiàn)有任何不合理，不正確的地方，還煩不吝指出，我會(huì)非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！

如果你也喜歡CSS，喜歡探討技術(shù)，或者對(duì)本文，本系列有任何的意見或建議，魚頭非常希望你能加入一個(gè)有趣的微信群 — “進(jìn)擊的CSS”。你可以掃描下方二維碼，添加魚頭微信，添加時(shí)注明 “加群”，如果你覺得我的文章有趣，歡迎關(guān)注微信公眾號(hào)“魚頭的Web海洋”。衷心希望可以遇見你。