CSS如何设置高度为屏幕高度_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显示屏