丁鹿学堂css开发细节之像素介绍

丁鹿学堂css开发细节之像素介绍

　　 像素是影响显示的基本单位。我们放大任何一张图片，开始变模糊后再放大，就会出现一个一个的格子，一个格子就是一个像素。

　　 我们平时说的像素，其实有三种不同的场景。理解这个，对于我们理解移动端适配很有意义。

　　 显示器的真实像素，是制造这个显示器的时候固定的像素。当你买一个显示器或者手机的时候，提到的分辨率，就是设备的物理像素。

　　 不同的设备有不同的物理像素，这给开发造成了很大的不便。但是操作系统为了统一，进行了抽象，这就是逻辑像素。比如，不管你买的是2K，还是4K显示器，都可以设置成10X10的分辨率。这个10就是逻辑像素。

　　 css中的像素，对应的就是设备的逻辑像素。因为逻辑像素本身就是面向我们开发者的。

　　 css作为一种样式语言，如果项目比较大的话，会有很多冗余，也不利于维护。为了解决这个问题，发明了css预处理器

　　 css预处理器是有自己独特的一套语法，它更高级，并且写完以后可以编译成css语言。

　　 市面上有很多css预处理器，都有自己独特的一套语法，会增加一些css不具备的好用的特性。

　　 但是所有的css预处理器语言，最终都会转化成css语言，因为浏览器对于样式来说，只识别css语言。

　　 受到scss的影响比较大，算是scss的改进。它可以完全兼容css语法，更容易上手。推荐使用。

　　 来自node 社区，主要用于给node项目进行css预处理。使用率相对较低。