rem
1）什么是rem
- rem 是相对于根元素（html）的相对长度单位，常用于响应式布局
2）不使用rem会有什么问题
- 页面中的文字不能随着屏幕的变换而变化
- 百分比布局和flex布局主要针对宽度布局，高度却被忽略
3）为什么使用rem
- 让页面中的文字和元素的宽高随屏幕变化而变化
4）设置viewport
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
媒体查询@media
1)什么是媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color 等
使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果
2）为什么使用媒体查询
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的
在使用rem做单位元素时，元素尺寸回根据根元素（html）的font-size值变化而变化
屏幕变大时，则根元素的font-size值变大，相应的元素也会变大
屏幕变小时，则根元素的font-size值变小，相应的元素也会变小
3）viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-
width=device-width:宽度等于当前设备的宽度
-
initial-scale=1：初始的缩放比例（默认为1）
-
maximum-scale=1：允许用户缩放到得最大比例（默认为1）
-
user-scalable=no：用户不能手动缩放
4）如何使用
@media screen and (max-width:720px) and (min-width:320px){
body{
background-color:#000;
}
@media screen and (max-width:320px){
body{
background-color:#eee;
}
}
5）媒体查询的类型
媒体类型（Media types）描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型
-
all
适用于所有设备 -
print
适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅分页媒体） -
screen
主要用于屏幕 -
speech
主要用于语音合成器 -
braille
盲文触摸装置
-
embossed
分页盲文打印机
-
handheld
小屏幕和流量有限的手持设备
-
projection
投影，给投影机使用
-
tty
固定间距字符网格
-
tv
智能电视设备
6）媒体查询关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
- and：可以将多个媒体特性连接到一起，相当于“且”的意思
- not：排除某个媒体类型，相当于“非”的意思，可以省略
- only：指定某个特定的媒体类型，可以省略
- ,（逗号：英文状态下的）：表示或者的意思
7）媒体查询特性（每条媒体特性表达式都必须用括号（）括起来）
- any-hover 是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上
- any-pointer 可用的输入机制中是否有任何指针设备，如果有，它的精度如何
- aspect-ratio 视窗（viewport）的宽高比
- color 输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0
- color-gamut 用户代理和输出设备大致程度上支持的色域
- color-index 输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0
- display-mode 应用程序的显示模式，如web app的manifest中的display 成员所指定
- forced-colors 检测是user agent否限制调色板
- grid 输出设备使用网格屏幕还是点阵屏幕？
- height 视窗（viewport）的高度
- hover 主要输入模式是否允许用户在元素上悬停
- inverted-colors user agent或者底层操作系统是否反转了颜色
- light-level 环境光亮度
- monochrome 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0
- orientation 视窗（viewport）的旋转方向
- overflow-block 输出设备如何处理沿块轴溢出视窗(viewport)的内容
- overflow-inline 沿内联轴溢出视窗(viewport)的内容是否可以滚动
- pointer 主要输入机制是一个指针设备吗？如果是，它的精度如何
- prefers-color-scheme 探测用户倾向于选择亮色还是暗色的配色方案
- prefers-contrast 探测用户是否有向系统要求提高或降低相近颜色之间的对比度
- prefers-reduced-motion 用户是否希望页面上出现更少的动态效果
- prefers-reduced-transparency 用户是否倾向于选择更低的透明度
- resolution 输出设备的像素密度（分辨率）
- scan 输出设备的扫描过程（适用于电视等）
- scripting 探测脚本（例如 JavaScript）是否可用
- update 输出设备更新内容的渲染结果的频率
- width 视口（viewport）的宽度，包括纵向滚动条的宽度
- width
- min-width定义视口（viewport）的最小宽度
- max-width定义视口（viewport）的最大宽度
less
特点：
写样式更简单：**嵌套**
使用方便：**变量、运算、函数**
1）css 存在的问题
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念
CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的
不方便维护及扩展，不利于复用
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代
码项目
2）less介绍
Less 介绍----Less是一门 CSS 预处理语言，它扩展了CSS的动态特性
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语
言的特性
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编
写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情
Less中文网：http://lesscss.cn/
3）less编写和编译
先创建 .less 文件，然后将其编译成最终使用的css文件，因为 html 文件只能引入 css 文件
每次更新less文件后，需要重新编译成css文件（vscode中的插件 easy less会自动编译）
编写：
@bgcolor:#000;
body {
background-color: @bgcolor;
}
.box {
width: 100px;
height: 100px;
background-color: @bgcolor;
}
@size:16px;
body {
font-size: @size;
}
.box {
width: 200px;
height: 200px;
font-size: @size;
}
编译：
安装 vs code 插件 easy less
在 .less 文件中保存代码，就会自动生成同名的 css 文件
在 html 文件中引入 css 文件即可
4）语法
变量：
@color:#adf;
@height:100px;
//1. 变量声明
header{
background-color:@color;
height:@height;
}
- 变量名称要求： 字母、数字、下划线、中横线
- 首字母可以为数字，可以为纯数字
- 区分大小写
- 变量值随意
运算：
header{
height:100px+200px;
}
section{
height:100px*2%; // 200px;
// 如果都有单位，则使用第一个作为单位
width:900/33px; //27.2727px;
// 如果只有一个有单位，则使用该单位
}
嵌套:
less 支持嵌套书写形式
（1）普通嵌套
#app{
#header{
// 子孙元素
.logo{
}
// 子元素
>.search{
}
// 后边紧挨着的元素
+ div{
}
&:hover{
}
&::before{
}
}
}
（2）媒体查询
.left{
height:500px;
background-color:#adb;
// >=1200
@media screen and(min-width:1200px) {
background:#6e4848;
}
// >=1200,<=900
@media screen and(max-width:1200px) and (min-width:900px){
background:#baa;
}
//<900
@media screen and (max-width:900px){
background:#abd;
}
}
（3）变量作用域
变量只能在当前代码段和下层代码段使用