22.[前端开发]Day22-CSS单位-CSS预处理器-移动端视口

news2025/3/16 18:47:15

1 CSS常见单位详解

CSS中的单位

CSS中的绝对单位（ Absolute length units ）

CSS中的相对单位（ Relative length units ）

1.em: 相对自己的font-size；如果自己没有设置, 那么会继承父元素的font-size

2.如果font-size中有写em单位, 可以理解成相对于父元素，但是更准确的理解依然是相对于自己的。

3.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      font-size: 1.5px;
    }

    .box {
      width: 100rem;
      height: 100rem;
      font-size: 20rem;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <div class="box">
    我是box
  </div>

</body>
</html>

2 深入理解pixel、DPR、PPI

当我们聊pixel时，到底在聊些什么？

像素的不同分类（一）

物理像素和逻辑像素

DPR、PPI、DPI

3 CSS预处理器Less、Scss

CSS编写的痛点

常见的CSS预处理器

认识Less

编写Less代码

less代码的编译

方式二（不推荐）：插件里找easy less安装后

当写完less代码，保存后会自动生成css文件，然后用link引用即可

推荐方式一

Less语法一：Less兼容CSS

Less语法二 – 变量（Variables）

Less语法三 – 嵌套（Nesting）

Less语法四 – 运算（Operations）

Less语法五 – 混合（Mixins）

less其他语法补充

认识Sass和Scss

4 浏览器视口Viewport

什么是移动端适配？

认识视口viewport

布局视口和视觉视口

理想视口（ideal viewport）

理想视口是布局视口=可视视口

移动端适配方案

练习

一. 完成所有的代码练习

二. 说出不同像素之间的差异

分为三种像素:设备像素(物理像素),设备独立像素(逻辑像素),css像素

设备像素(物理像素)
- 是指显示器上真实的像素,在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小
- iPhone X的分辨率 1125 x 2436，指的就是设备像素
设备独立像素(逻辑像素)
- 如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的
- 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发
- 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念
- 比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是1920x1080的大小
- 如果物理像素很大的时候,比如2k,4k等,可以理解为一个逻辑像素里面由多个物理像素来渲染的
css像素
- 默认情况下就是设备独立像素(也就是逻辑像素)