rem布局

em：相对单位，参考的是父级元素的字号大小的倍数，如果是2em表示是字号的2倍

rem：相对单位，参考的是根元素html的字号大小的倍数，如果是2rem表示是html元素字号的2倍

rem优势：参考元素是html，一个页面中只有一个html元素，可以实现整体控制。

1、媒体查询（Media Query）：

使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

1.1 语法规范

用@media开头，注意@
mediaType 媒体类型
关键字 and | not | only
media feature 媒体特性，必须有小括号包括

@media screen and (min-width: 800px) {
      
      
    body{
      
      
      background-color: pink;
    }
  }

1.2 媒体类型

将不同的终端设备分成不同的类型，称为媒体类型

all：用于所有设备

print：用于打印机和打印预览

screen：用于电脑屏幕、平板电脑、智能手机

1.3 关键字

关键词是将媒体类型和多个媒体特性连接到一起作为媒体查询条件

and：可以将多个媒体查询特性链接到一起，相当于且的意思

not：排除某个媒体类型，相当于非的意思，可以忽略

or：可以测试多个媒体查询条件，只有有一个条件成立，就执行，或的意思

only：指定某个特定的媒体类型，可以省略

1.4 媒体特性

每种媒体类型都具有个字不同的媒体特性，根据不同的媒体类型的媒体特性设置不同的展示风格，要加小括号进行包含，

width：页面可见区域宽度

min-width：页面最小可见区域宽度

max-width：输出设备中页面最大可见区域宽度

2、css弊端

css是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

css需要书写大量看似没有逻辑的代码，css冗余度是很高的
不方便维护和扩展，不利于复用
css没有很好的计算能力，只能计算好数值人工填充
非前端开发工程师来讲，往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目

3、Less

Less是一门css扩展语言，也是css预处理器
作为css的一种形式的扩展，它并没有减少css的功能，而是在现有的css语法基础上，为css加入程序是语言的特性
它在css的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能呢，大大简化了css的编写，并且降低了css的维护成本，让我们用更少的代码做更多的事情。

总结：Less是一门CSS预处理语言，他扩展了CSS的动态特性。

3.1 Less变量

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

@color:pink;

body{
    
    
  color: @color;
}

3.2 Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件
我们需要吧我们的.Less文件，编译生成.css文件，这样html页面才可以使用
在当前文件夹，使用cmd命令lessc style.css > style.css

3.3 Less嵌套

如果遇到（交集 | 伪类 | 伪元素选择器）

内层选择器的前面没有&符号，则它被解析为父选择器的后代
如果有&符号，它就被解析为父元素自身或父元素的伪类

/* html */
 <div class="header">
    <div class="logo"> </div>
  </div>

/* css */
.header{
    
    
  width: 200px;
  height: 200px;
  background-color: pink;
  .logo{
    
    
    width: 100px;
    height: 100px;
    background-color: plum;
  }
}

添加&符号

<div class="content">
 <div class="top"></div>
 <div class="bottom"></div>
</div>

/**/
.content{
    
    
  height: 200px;
  width: 200px;
  background-color: royalblue;
  div{
    
    
    width: 100px;
    height: 100px;
    background-color: sandybrown;
    &.top{
    
     /*表示选中content下边class等于top的div元素*/
      background-color: #000;
    }
  }
}

3.4 Less运算

任何数字、颜色或者变量都可以参与运算，+ - * /

参与运算的两个数字，可以一个有单位，一个没有单位，最终单位就是唯一的那个单位

less的运算符左右必须加空格

4、rem适配方案

方案1：less+媒体查询+rem

页面元素的rem值 = 页面元素值（px）/ html font-size字体大小

方案2：flexible.js+rem

5、less文件导入

一个index.less文件导入另外一个common.less文件，语法：@import 'common';

大前端基础~rem及媒体查询