溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“CSS瀏覽器的視圖與坐標怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS瀏覽器的視圖與坐標怎么實現”吧!
像素(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的<head></head>中引入<meta name="viewport">
<meta name="viewport" content="">
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>
}
描述符：
據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
首先我們看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：
<!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>
到此，相信大家對“CSS瀏覽器的視圖與坐標怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
