摘要:近几年rem开始逐渐展露头角,很多人对它褒贬不一,有的尝试使用之后觉得很麻烦就弃坑了,有的却觉得很好用。但如果用来做web app它莫过于是最合适的。

1.rem是什么？

rem指的是相对于根元素的字体大小的单位,简单来说它是一个相对单位。看到rem大家或许会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素，一个是依赖父元素计算。

1.2 rem单位

rem 是一个相对单位，1rem 就是 html

    <!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标签 */
    html {
      font-size: 12px;
    }

    /* body {
      font-size: 18px;
    }  */

    .box {
      /* 谷歌浏览器默认的文字大小是 16像素 */
      width: 10rem;
      height: 10rem;
      background-color: pink;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

2.什么是媒体查询

使用@media查询,可以针对不同的媒体类型定义不同的样式
2.可以自动检测视口的宽度。
3.媒体查询最大的作用是：根据屏幕宽度修改html文字大小。

2.1 语法:

    /* 查询375像素的设备，如果是 背景为粉色 */
@media (width:375px) {
    html {
        font-size: 40px;
    }
}

@media (width:320px) {
    html {
        font-size: 30px;
    }
}

2.2 媒体特性

1.width （定义输出设备中页面 可见区域 的宽度

2.min-width （定义输出设备中页面最小可见区域宽度）

3.1. max-width （定义输出设备中页面最大可见区域宽度）

3.less

1.less 可以帮我们把px单位转换到rem单位。

2.Less是一个CSS预处理器, Less文件后缀是.less

3.扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

如果我们使用的是VScood编译器,那我们首先要下载一个为名称: Easy LESS的插件 保存自动生成css文件。注：html页面使用的还是css文件，而不是less文件

3.1 less变量

变量是指没有固定的值可以改变的建议:小驼峰命名法@backGroundColor
定义变量：@变量名: 值;
使用变量：CSS属性：@变量名

    // 声明变量  适合于页面出现次数比较多的时候才用
@color: red;
@border: 1px solid @color;
.box {
  // 使用变量
  color: @color;
  background-color: blue;
  // border: 1px solid @color;
  border: @border;
}
.pay {
  border-left: @border;
  border-right: @border;
}

3.2 less运算

Less提供了加（+）、减（-）、乘（*）、除（/）算术运算,任何数字、颜色或者变量都可以参与运算。

    .box {
  width: 100px + 100;
  // 注意：单位的转换 计算的时候以第一个单位为准
  height: (100 / 37.5rem);
  // height: (100rem / 37.5);
  // height: 100px - 50;
  margin: (20px * 5) auto;
  padding: (10px / 5);
  border: 1px + 2 * 3 solid red;

}

注意点：
1.计算以第一个单位为准，尽量写到最后一个数字上
2.除法比较特殊，必须添加小括号
3.计算别忘了先乘除后加减

    .box {
  width: 100px + 100px;
  height: 100px - 50;
  padding: 10 * 3px;
  // margin: 10px ./ 37.5rem;
  // 1.以后的除法用小括号包含
  // margin: (10px / 37.5rem);
  // 2. 不同的单位 以第一个单位为准
  // margin: (10rem / 37.5);
  margin: (10 / 37.5rem);
  background-color: pink; 

}

3.5less嵌套

用Less嵌套写法生成后代选择器

    .box {
    //父盒子
  width: 100px;
  height: 100px;
  background-color: pink;

  // 子盒子
  p {
    font-size: 16px;

    // 孙盒子
    span {
      color: red;
    }
  }
}

在写伪类和伪元素的时候，经常使用 & 来代替父元素

    .nav {
  &::before {
    content: '';
  }
}

3.4 less的导入与导出

    //导入
    @import './变量.less';
@import url(./变量.less);
    //导出
    //导出必须写到第一行
    "less.compile": {
    "out": "../css/" // 设置导出css路径
  },

4.flexible.js

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。有了这个js文件，可以帮我们自动检测屏幕宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配。

    <script src="./js/flexible.js"></script>

如果想对这个有了解的可以自行查看这里就不做太详细的介绍啦

就写到这 第一次写还有很多不足
若有不对的地方或者遗漏的欢迎指点或补充

移动web之rem适配布局 less（CSS预处理器）等