【Hello CSS】第三章-瀏覽器的視圖與座標

時間  2019-12-07
標籤 Hello CSS 第三 瀏覽器 視圖 座標 欄目 瀏覽器 简体版
原文   原文鏈接

在上一篇【Hello CSS】的第二章第二章-CSS的邏輯屬性與盒子模型中提了個問題：javascript

爲何Flex box跟Grid box的是以start、end爲排列規則，而不是常規的top 、right 、bottom 跟left？php

如今各位看官有答案了嗎？css

由於上一篇中有提到過CSS 邏輯屬性的變革，從物理概念跳躍到了邏輯概念，也就是從top 、 right 、 bottom、 left更新爲block、inline、start、 end。因爲Flex box跟Grid box是CSS3的佈局模式，因此天然而然會使用更加適應於新時代的語言屬性。html

上一篇主要介紹了CSS的邏輯屬性跟盒子模型的基本現狀。本篇則會介紹瀏覽器的視圖與座標。java

關於設備屏幕，咱們應該知道的知識

像素(Pixel)

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

咱們看看下圖，圖中最小的點就是設備的像素。github

image

分辨率(Image resolution)

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

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

下圖是不一樣分辨率下的圖像顯示chrome

image

每英寸像素(PPI)

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

視網膜顯示屏(Retina Display)

視網膜顯示屏(Retina Display)是一種由蘋果公司設計和委託製造的顯示屏。有研究代表，人類肉眼可以分辨的最高PPI是300PPI，因此超過PPI超過300的每每被稱爲Retina顯示屏，這個概念是不對的，Retina顯示屏指的是在人體正常使用距離下，沒法用肉眼看到屏幕像素的顯示屏。

下圖爲顯示了「地圖」二字的Retina顯示屏

image

每英寸點數(DPI)

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

下圖爲噴墨打印機以較低質量在約 0.25 平方英寸的範圍內按 150 dpi 打印的效果的特寫

image

設備獨立像素(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 英尺）。

以下圖：

image

因此1px CSS像素大小該是多少？

基於這個問題，W3C給出的答案以下：

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

以上就是1px CSS像素的定義。也合理的解釋了爲何顯示設備的物理尺寸與物理像素不一樣，可是一樣CSS值的元素大小卻相差無幾了。這是由於不一樣設備的px實現的參考錨點不一樣。

若是想知道不一樣設備屏幕的具體差別，能夠參考這個網站：https://uiiiuiii.com/screen/index.htm

屏幕尺寸怎麼算？

首先咱們能夠知道1英寸=2.54CM，基本全部的屏幕都以對角線來衡量尺寸。

手機屏幕常見尺寸有：五、六、5.五、6.五、7

筆記本通常是：十、十二、1三、1四、1五、1八、19

想知道本身屏幕的尺寸可使用勾股定理：

image

若是想知道你的顯示器尺寸，能夠參考這個網站：https://zh.infobyip.com/detectdisplaysize.php

魚頭注：關於CSS的單位值，會在後面的章節講解，有興趣的千萬不要錯過。

視圖

視口(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="">

下面表格來自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。

魚頭注：具體的<meta>做用跟屬性會在後面的章節講解，有興趣的千萬不要錯過。

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顯示，兼容性幾乎全線飆紅。

image

對於咱們在移動設備上經常使用的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），也稱 直角座標系，是一種 正交座標系。

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

image

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

image

圖上信息就不做過多的解釋了，有須要詳細瞭解的能夠參考https://zh.wikipedia.org/笛卡爾座標系

WEB中的座標系統

上面介紹的是咱們數學概念中的座標系，在WEB頁面中，也有相應的座標系統。計算法則也相仿，只是它和咱們數學中的概念有點不同，就是原點位於瀏覽器的左上角。整個瀏覽器屏幕就是第一象限，表現上只有正值，負值都隱藏了起來。不管是平面座標仍是三維座標都是如此，只不過因爲瀏覽器屏幕是個平面，因此三維座標中的Z軸是貫穿瀏覽器的。

平面座標系的座標值能夠看如下圖示與DEMO：

image

image

<!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地址：https://krissarea.gitee.io/blog/css/css-ccs.html

魚頭注：關於CSS 二維與三維的圖像跟動畫會在後續的章節進行講解，有興趣的能夠繼續關注本系列。

參考資料

你真的瞭解css像素嘛？

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

devicepixelrati

設備像素比devicePixelRatio簡單介紹

W3C

分辨率

像素

視網膜顯示屏

每英寸像素

每英寸點數

在移動瀏覽器中使用viewport元標籤控制佈局

Visual Viewport API

視口概念

VisualViewport

meta

Window.visualViewport

@viewport

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

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念爲主題的系列文章，旨在幫助你們更深入地瞭解而且提升CSS在各位開發者心目中的地位。因爲魚頭我水平有限，文筆有限，若是各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會很是感謝的；若是經過文章有任何想法或疑問，也但願各位能積極留言，咱們互相探討；若是經過本系列文章有所收穫，這就讓魚頭我喜不自勝了！

若是你也喜歡CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，魚頭很是但願你能加入一個有趣的微信羣 — 「進擊的CSS」。你能夠掃描下方二維碼，添加魚頭微信，添加時註明 「加羣」，若是你以爲個人文章有趣，歡迎關注微信公衆號「魚頭的Web海洋」。衷心但願能夠碰見你。

image

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程