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

1 CSS常见单位详解

CSS中的单位

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

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

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

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

3.
css 复制代码
<!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像素
- 默认情况下就是设备独立像素(也就是逻辑像素)

三. 说出你对视口的理解(面试题)

总结：内容回顾

一. 单位相关

1.1. CSS其他单位

绝对单位

cm/mm/in
px

相对单位

em/rem/vw/vh

1.2. pixel的深入理解

pixel代表的含义
当前像素的分类:
- 设备像素（物理像素）
- 设备独立像素（逻辑像素）
- CSS像素 -》逻辑像素

1.3. DPR、PPI

DPR：device pixel ratio

设备像素比

PPI：pixel per in

二. CSS预处理器

2.1. CSS弊端以及常见的预处理器介绍

2.2. Less的介绍

介绍
编写less
问题:less如何转成CSS
- node -> npm -> lessc -> webpack
- vscode插件和在线查看
- js文件
  - cdn
  - 下载本地

2.3. less语法

兼容CSS
定义变量
嵌套
- &掌握
计算
混入mixins
- 基本使用
- 传递参数
- 结合Maps
额外补充
- 继承
- 内置函数
- 作用域
- 注释
- 导入

2.4. 介绍Scss

三. 移动端适配

3.1. 移动端开发相关的概念理解

3.2. viewport

布局视口(980px)
视觉视口
理想视口
设置视口
- width
- initial-scale
- user-scalable
- minimum-scale
- maximum-scale