本篇內容主要講解“CSS瀏覽器的視圖與坐標怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS瀏覽器的視圖與坐標怎么實現”吧!

我們提供的服務有：網站建設、做網站、微信公眾號開發、網站優化、網站認證、瀍河ssl等。為成百上千企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的瀍河網站制作公司

像素(Pixel)

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

分辨率(Image resolution)

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

每英寸像素(PPI)

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

視網膜顯示屏(Retina Display)

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

每英寸點數(DPI)

DPI（英語：Dots Per Inch，每英寸點數）是一個量度單位，用于點陣數位影像，意思是指每一英寸長度中，取樣或可顯示或輸出點的數目。如：打印機輸出可達600DPI的分辨率，表示打印機可以在每一平方英寸的面積中可以輸出600X600＝360000個輸出點。

設備獨立像素(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來說，還是希望在不同設備上大小盡可能地看起來相同。

那么這該如何實現呢？

基于這個問題，W3C提出參考像素這個概念。定義如下：

參考像素是設備上一個像素的視角，像素密度為96dpi，離設備長一臂。標準的手臂長度為28英尺，所以視角大概為0.0213度。對于臂長的讀數，1px應該為0.26mm（1/96 英尺）。

所以1px CSS像素大小該是多少？

基于這個問題，W3C給出的答案如下：

對于CSS設備而言，這些尺寸要么錨定(i)通過將物理單元與其物理測量關聯起來，或者錨定(ii)通過將像素單元與參考像素關聯起來。對于打印介質和類似的高分辨率設備，錨單元應該是標準物理單位之一（像英尺，厘米等）。對于低分辨率的設備和具有不尋常觀看距離的設備，建議將錨單元作為像素大圓。對于此類設備，建議像素單元參考最接近參考像素的設備像素的整數。

以上就是1px CSS像素的定義。也合理的解釋了為什么顯示設備的物理尺寸與物理像素不同，但是同樣CSS值的元素大小卻相差無幾了。這是因為不同設備的px實現的參考錨點不同。

屏幕尺寸怎么算？

首先我們可以知道1英寸=2.54CM，基本所有的屏幕都以對角線來衡量尺寸。

手機屏幕常見尺寸有：5、6、5.5、6.5、7

筆記本一般是：10、12、13、14、15、18、19

想知道自己屏幕的尺寸可以使用勾股定理：

視圖

視口(viewport)

視口(viewport)代表當前可見的計算機圖形區域。在 Web 瀏覽器術語中，通常與瀏覽器窗口相同，但不包括瀏覽器的 UI， 菜單欄等——即指你正在瀏覽的文檔的那一部分。

在WEB開發中，視口(viewport) 是個很重要的概念，尤其在響應式網頁設計中是必備的。

通過上述一系列的名詞介紹，我們可以知道不同設備的尺寸，分辨率，CSS像素大小都不盡相同，所以 視口(viewport) 的大小也就跟設備相關。

在尺寸較大的設備中，在這些設備上，應用顯示區域不一定是全屏的，viewport 是瀏覽器窗口的大小。

在大多數移動設備中，瀏覽器是全屏的，viewport 是整個屏幕的大小。

在全屏模式下，viewport 是設備屏幕的范圍，窗口是瀏覽器窗口，瀏覽器窗口大小小于或等于視口的大小，并且文檔是這個網站，文檔的大小可比 viewport 長或寬。

如何設置文檔viewport？

文檔viewport可以通過三種方式進行設置：

HTML標簽

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

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 {

}

描述符：

據can_i_use顯示，兼容性幾乎全線飆紅。

對于我們在移動設備上常用的viewport設置

就可以這么來寫

@viewport {

width: device-width;

zoom: 1.0;

min-zoom: 0.5;

max-zoom: 2.0;

user-zoom: zoom;

}

VisualViewport

首先我們看Window.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），也稱直角坐標系，是一種正交坐標系。

下圖是數學概念中的平面坐標系：

下圖是數學概念中的三維直角坐標系：

圖上信息就不作過多的解釋了，有需要詳細了解的可以參考https://zh.wikipedia.org/笛卡爾坐標系

WEB中的坐標系統

上面介紹的是我們數學概念中的坐標系，在WEB頁面中，也有相應的坐標系統。計算法則也相仿，只是它和我們數學中的概念有點不一樣，就是原點位于瀏覽器的左上角。整個瀏覽器屏幕就是第一象限，表現上只有正值，負值都隱藏了起來。無論是平面坐標還是三維坐標都是如此，只不過由于瀏覽器屏幕是個平面，所以三維坐標中的Z軸是貫穿瀏覽器的。

平面坐標系的坐標值可以看以下圖示與DEMO：

到此，相信大家對“CSS瀏覽器的視圖與坐標怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！