rem，rem与高度自适应，媒体查询，rem与媒体查询，LESS，Less语法，less数学运算，less函数的使用，函数的参数传递

为什么要用rem？

rem的主要目的就是解决用于不同屏幕的适配问题。rem能够等比例的适配所有的屏幕。

单纯使用流式布局的结果是宽度自适应  高度是写死的  导致不能完全适配设计图(因为不同的屏幕大小下 高度永远是写死的), 而使用rem就可以让高度也保持自适应效果

• 流式布局：虽然可以让各种屏幕都适配，但是显示效果不是非常的友好，因为只有几个尺寸的手机能够完美的显示出来视觉设计师和交互最想要的效果。但是目前使用流式布局的公司非常多，比如 亚马逊 、京东 、携程
• rem布局：rem能够适配所有的屏幕，与less配合使用效果会更好。目前使用rem布局的有：淘宝 、 苏宁

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。它就是一个相对单位。

既然是一个单位, 而px也是一个单位   所以但凡是使用px的地方都可以使用rem来代替  而rem单位的大小永远参照的是html的font-size值   1rem = html的font-size的大小

特点: 一旦html的font-size发生了改变  那么rem的大小也会发生改变

rem与高度自适应

因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size大小不一样就可以达到不同屏幕的适配了。

媒体查询

媒体查询（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

根据不同的屏幕大小去加载不同的css样式

语法说明:

media screen (条件) {
    满足条件加载的css内容
}

// 条件说明
1. min-width: 320px =>  最小宽为320 (320以上的设备)
2. max-width: 640px =>  最大宽为640 (640以下的设备)
3. width: 540px     =>  宽度等于540

易错点:
    1. 媒体查询仅仅是提供一个条件 不会提升权重 所以一般媒体查询写在最下面
    2. 绝对大坑: and前后必须要有空格

rem与媒体查询

使用rem配合媒体查询可以适配多个终端

需求：基于750的设计图,里面得到的盒子的大小为100px 100px 改写成rem 自定义html的font-size为50 可以实现在主流手机里面宽高自适应 
主流手机机型：320 360 375 384 400 414 424 480 540 720 750

px转换成rem的公式: px/html的font-size值 
动态计算不同屏幕对应的html的font-size值公式:  当前屏幕/(设计图的宽 / 基于这个设计图的html的fontsize)

LESS

学习网站：

官网http://lesscss.org/
中文网http://lesscss.cn/

Less简介

1.less本质上是css的一个超集  >= css  而且具备css不具备的一些特点
2.浏览器不认识less 我们可以借助于插件让less变成css 

使用less的基本流程: 程序员写less => 插件  => css  浏览器引入的依旧是css文件

安装插件

1. 点击左侧第五个按钮(扩展) 在商店里面搜索easy less
2. 点击安装 (需要联网) 
3. 点击重新加载
4. 安装成功之后  在编写less的保存的时候 会自动在当前目录下面生成一个同名的css文件

配置css的生成目录

实际工作中一般less是一个单独的文件夹 然后生成的css也会在一个独立的css文件下面

1. 点击左下角的小齿轮 (设置)
2. 选择用户设置
3. 点击左侧的扩展按钮 找到 esay less
4. 点击在setting.json文件中编辑
5. 将
"less.compile": {
"out": "../css/"  
}
复制到右侧用户设置里面去 

注意: 一定要在前面一个逗号

Less语法

注释

/*这个注释是CSS中的注释，因此会编译到css中*/
//这个注释,CSS中用不了，因此不会编译出来。

变量

可以变化的量 方便维护

@自定义变量名: 对应的取值;

例如:

@mainColor: yellow;

.box {
  color: @mainColor;
  background-color: @mainColor;
  border: 1px solid @mainColor;
}

嵌套(混入)

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

1. 后代选择器  直接写在大括号里面即可
2. 子代选择器  直接 > 即可
3. 交集选择器  使用&符号 表示自己
4. 并集选择器  直接使用,
5. 伪类选择器  使用&符号 表示自己
6. 伪元素选择  使用&符号 表示自己

less数学运算

在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。

// less可以拥有计算能力
.box {
  width: 100 + 200px;
  height: 50 * 2px;
  font-size: 320 / 15px;
}

less函数的使用

我们之前写css 需要去提取一些公共类 然后给对应的html元素去调用, 在less里面 可以直接将之前的css公共类替换成less函数, 这个函数给对应的css去调用

1. 声明 => .函数名 () { 公共的css }
2. 使用 => .box { .函数名() };

特点: 
1. 函数不会被编译到css里面去
2. 函数在选择器内部调用

函数的参数传递

// 声明函数
.br(@val: 20px) {
  /* 标准写法 */
  border-radius: @val;
  /* 私有前缀的写法 */
  -webkit-border-radius: @val;
  /* 私有前缀的写法 */
  -ms-border-radius: @val;
  /* 私有前缀的写法 */
  -o-border-radius: @val;
  /* 私有前缀的写法 */
  -moz-border-radius: @val;
}

.box {
  // 调用函数
  .br(5px);
}

.box2 {
  .br(10px);
}

参数的传递过程: 调用函数的时候将函数小括号的值传递给什么函数里面的变量, 如果调用函数的小括号里面没有值会使用默认值

引入

以前一个页面需要加载好多css文件,每一条link就是一个请求,使用less的引入可以将多个css整合成一个去加载

@import '需要引入的less文件'

注意: 一般引入的less文件建议放在最前面, 防止覆盖

苏宁易购

适配主流浏览器

//适配主流浏览器
//320 360 375 384 400 414 424 480 540 720 750
//把屏幕分成15rem
.adapter(@width) {
  @media (min-width: @width) {
    html {
      font-size: @width/15px;
    }
  }
}

配置px2rem插件

1. 点击左下角的小齿轮 (设置)
2. 选择用户设置
3. 点击左侧的扩展按钮 找到px2rem配置
4. 将 Root font size设置为50

将vscode重新启动一下

易错点说明

1. import "文件路径"  import后面有空格
2. 配置好的输出文件目录是以当前less文件为出发 往上一层的css文件夹里面