rem 基础

rem 的优点

• 文字能随着屏幕大小发生变化
• 元素高度和宽度都能随着屏幕大小发生变化

rem 单位

• rem(root em)是一个相对单位，类似于em，em 是父元素字体大小。
• rem的基准是相对于 html 元素的字体大小。
• 父元素文字大小可能不一致， 但是整个页面只有一个 html，可以很好来控制整个页面的元素大小

媒体查询

什么是媒体查询

• 媒体查询（Media Query）是 CSS3 新语法
• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式

媒体查询语法

1
2
3

@media mediatype and|not|only (media feature) {
  CSS-Code;
}

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

mediatype 查询类型

关键字

• and：可以将多个媒体特性连接到一起，相当于“且”的意思。
• not：排除某个媒体类型，相当于“非”的意思，可以省略。
• only：指定某个特定的媒体类型，可以省略。

媒体特性

从小到大来写，这样代码更简洁

引入资源

语法规范：

1

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

less 基础

css 弊端

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

less 介绍

中文官网

• Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为 CSS 预处理器
• 它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写
• 常见的 CSS 预处理器：Sass、Less、Stylus

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 语法

less 语法包括以下几个方面：

• Less 变量
• Less 编译
• Less 嵌套
• Less 运算

less 变量

变量是指没有固定的值，可以改变的。因为我们 CSS 中的一些颜色和数值等经常使用。

语法规范：

1

@color: pink;

使用变量：

1
2
3
4
5
6
7

//直接使用
body {
  color: @color;
}
a:hover {
  color: @color;
}

变量命名规范：

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

less 编译

vocode Less 插件: easy less

保存 less 文件，自动生成 css 文件

less 嵌套

1
2
3
4
5

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

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

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

less 运算

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

注意事项：

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

rem 适配方案

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

rem 实际开发适配方案

• 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询）
• CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值；

rem 适配方案技术使用（市场主流）

• 技术方案 1
  • less
  • 媒体查询
  • rem
• 技术方案 2（推荐）
  • flexible.js
  • rem