• 丁鹿学堂:前端开发基础知识之像素详解


    css中的像素

    像素是影响显示的基本单位。我们放大任何一张图片,开始变模糊后再放大,就会出现一个一个的格子,一个格子就是一个像素。
    我们平时说的像素,其实有三种不同的场景。理解这个,对于我们理解移动端适配很有意义。

    物理像素

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

    逻辑像素

    不同的设备有不同的物理像素,这给开发造成了很大的不便。但是操作系统为了统一,进行了抽象,这就是逻辑像素。比如,不管你买的是2K,还是4K显示器,都可以设置成1920X1080的分辨率。这个1920就是逻辑像素。
    我们显示的时候都是用的逻辑像素。 我们真实开发对应的就是逻辑像素。

    css中像素

    css中的像素,对应的就是设备的逻辑像素。因为逻辑像素本身就是面向我们开发者的。
    如果在前端开发中要获取电脑的逻辑像素,可以使用js提供的API

    screen.width
    
    • 1
    css预处理器介绍

    css作为一种样式语言,如果项目比较大的话,会有很多冗余,也不利于维护。为了解决这个问题,发明了css预处理器
    css预处理器是有自己独特的一套语法,它更高级,并且写完以后可以编译成css语言。
    市面上有很多css预处理器,都有自己独特的一套语法,会增加一些css不具备的好用的特性。
    但是所有的css预处理器语言,最终都会转化成css语言,因为浏览器对于样式来说,只识别css语言。

    常见的css预处理器
    scss

    是最早的流行的css预处理器语言,是ruby社区进行支持的。

    less

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

    stylus

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

  • 相关阅读:
    C++11——— 包装器
    springBoot整合minio
    JAVA学习第十一课:java绘图
    在线协作文档哪家强?微软 Loop 、Notion、FlowUs
    计算机网络
    09 | Harbor中的镜像清除
    中小型水库大坝安全自动监测系统解决方案
    【数据结构】栈和队列
    GIS入门,WMTS介绍,WMTS与WMS有什么区别,OpenLayers和cesium如何加载WMTS?
    SecretFlow隐语-安装
  • 原文地址:https://blog.csdn.net/qq_38525381/article/details/127697866