我发现了一个好玩的“小玩具”——rem布局

---

前言

又是新的一天，我们要开心的学起来！小编又来和你们分享我的小知识库了，虽然不大，但是我希望对大家都能受益非浅。

---

1、 rem布局

首先小编先给你们说的rem布局，那么什么叫rem布局呢？容小编慢慢为你们一一讲解！

1.1、rem单位

rem（root em）是一个相对单位，就像是em一样，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。
比如：根元素(html)设置字体大小为12px，div设置字体大小为2rem，就相当于字体设置成了24px大小。也可以理解为1rem=12px！

/* 根html 为 12px */
html {
   font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */       
div {
    font-size: 2rem;
}

这样的优势是什么呢？
rem的优势：父元素的文字大小可能不一致，但是整个页面只有一个html，可以很好的控制整个页面的元素大小。

1.2、 媒体查询

1.2.1、 什么是媒体查询

媒体查询（Media Query）是CSS3的新语法。

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 现在很多设备都在使用媒体查询，比如：苹果手机、Android手机、平板等设备

1.2.2、 媒体查询语法规范

1. 用@media开头，注意@符号
2. mediatype媒体类型
3. 关键字 and not only
4. media feature媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    body{
    	background-color:red;
    }
}

1.2.2.1、 媒体类型

把不同的终端设备划分成不同类型就称为媒体类型。

1.2.2.2、 关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

• and：可以将多个媒体特性链接在一起作为媒体查询的条件
• not：排除某个媒体媒体类型，相当于非的意思
• only：指定某个特定的媒体类型

1.2.2.3、 媒体特性

每种媒体类型都有各自不同的特性，根据不同的媒体类型的媒体特性我们需要设置不同的展示风格，小编暂时了解三个。
注意：他们都需要加小括号

1.3、 Less基础

1.3.1、 Less介绍

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。

做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

1.3.1.1、 Less安装

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可

③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

Less 编译 vocode Less 插件

Easy LESS 插件用来把less文件编译为css文件

安装完毕插件，重新加载下 vscode。

只要保存一下Less文件，会自动生成CSS文件。

1.3.2、 Less变量

重点：

• 必须是@为前缀
• 不能有特殊字符
• 不可以用数字开头
• 区分大小写

比如：

/*@变量名:值;*/
@color:red;

1.3.3、 Less嵌套

简单来说就是在less文件中我们可以把父盒子里面的子元素的样式写在父盒子样式里面，让他们在一个家里。
情况一：

// 将css改为less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}

情况二：
如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
}

1.3.4、 Less运算

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

• 乘号（*）和除号（/）的写法
• 运算符中间左右有个空格隔开，比如： 1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

1.4、 rem适配方案

1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。
2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

技术方案：
1.Less+rem+媒体查询（推荐）
2.flexible.js+rem
在这里小编推荐第一种，当然这只是小编的个人意见。因为第二种小编还没学习到js所以肯定不熟悉，但是这两种方法都是非常好用的方法。

---

总结

小编认为在使用这个rem布局的时候真的很简单快捷，特别是写样式的时候，在less文件中书写样式你会发现无论是再多的盒子你都可以清楚的知道结构再哪儿。这是我最喜欢的地方，大家也可以去试试！那么小编此次的分享就到这里了，欢迎各位大佬指导！