CSS浏览器的视图与坐标怎么实现

本篇内容主要讲解“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标签

相关推荐: div+css入门框架架构的知识点有哪些

本篇内容主要讲解“div+css入门框架架构的知识点有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“div+css入门框架架构的知识点有哪些”吧! css的浮动效果由float属性设置体现，都测试几次就知道怎么…