web前端入门到实战：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)日常用语中之分辨率多用于影像的清晰度。分辨率越高代表影像质量越好，越能表现出更多的细节。

　　下图是不同分辨率下的图像显示

　　每英寸像素(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来说，还是希望在不同设备上大小尽可能地看起来相同。

　　那么这该如何实现呢？

　　基于这个问题，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">

　　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设置

　　就可以这么来写

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

　　<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>

　　'use strict';

　　window.addEventListener('pointermove', PointerEvent => {

　　const {

　　} = PointerEvent;

　　poinerPosition.innerHTML = ——

　　(${x}, ${y})

　　——;

　　poinerPosition.style.left = ——${x + 20}px——;

　　poinerPosition.style.top = ——${y}px——;

　　});

　　</script>

　　</body>

　　</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h62889.shtml