移动端布局基础（2） ｜ 青训营笔记

四、rem布局

1. rem基础

rem（root em）是一个单位，类似于 em。区别：

• em 是相对于父元素字体大小。
• rem 的基准是 相对于html元素的字体大小。

比如，根元素（html）设置 font-size: 12px，非根元素设置 width: 2rem，则换成 px 就是 24px。 优点：通过修改html元素字体的大小来改变页面中元素的大小从而整体控制整个页面。

html {
    font-size: 15px;
}
div {
    height: 10rem;
    width: 10rem;
}

2. 媒体查询

2.1 定义

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

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

2.2 语法规范

@media mediatype and|not|only (media feature) {
    CSS3-Code;
}Copy to clipboardErrorCopied

• 以 @media 开头
• mediatype 是媒体类型
• 关键字 and、not、only
• media feature 媒体特性，必须有小括号

1. mediatype

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

   值	描述
   all	用于所有设备
   print	用于打印机和打印预览
   scree	用于电脑屏幕，平板电脑，智能手机等等

2. 关键字

   关键字将媒体类型和多个媒体特性连接到一起作为媒体查询的条件。（一般只用and）

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

3. 媒体特性

   每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。 尽量从小到大写CSS的层叠性

   值	描述
   width	定义输出设备中页面可见区域的宽度
   min-width	定义输出设备中页面最小可见区域宽度
   max-width	定义输出设备中页面最大可见区域宽度

2.3 引入资源

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

举例

/* 当屏幕大于 640px，一行显示两个 */
/* 小于 640px 的，一行显示一个 */
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and

3. less

3.1 为什么学习less，css有什么弊端

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

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

3.2 less简介

• Less（Leaner Style Sheets的缩写）是一门 CSS 扩展语言，也称为 CSS 预处理器。

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

• 它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
• 实质：Less是一门 CSS 预处理语言，它扩展了 CSS 的动态特性。

• Less中文网址: lesscss.cn 常见的CSS预处理器：Sass、Less、Stylus

4. less的使用

4.1 less变量

变量是指没有固定的值，CSS 中一些颜色和数值经常使用。

@变量名:值;

变量的命名规范：

• 必须有 @ 前缀
• 不能包含特殊字符
• 不能以数字开头（除去前缀 @ 的部分）
• 大小写敏感

举例

// 定义一个粉色变量
@color: pink;
@font14: 14px;
body {
    background-color: @color;
}
div {
    background-color: @color;
    font-size: @font14;
}

4.2 less编译

• 本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

• 所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

• 在 VS Code 中，使用 Easy Less 插件 可以即时编译生成 CSS 文件，再引入即可。

4.3 less嵌套

类似于html元素之间的嵌套，Less 里也可以把选择器嵌套。

#header {
    backgorond-color: pink;
    .logo {
        width: 100px;
    }
}Copy to clipboardErrorCopied

等同于：

#header {
    backgorond-color: pink;
}
​
#header .logo {
     width: 100px;
}

要在 less 中写伪类、交集选择器、伪元素选择器，则要在内层选择器的前面加上 &。

• 内层选择器前面没有 &，则它被解析为父选择器的后代。（中间有空格相接，使选择器不生效）
• 若有 &，则被解析为父元素自身或父元素的伪类。

a:hover {
    color: red;
}Copy to clipboardErrorCopied

Less嵌套写法：

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

4.4 less运算

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

注意：

• 对于除法运算，需要用圆括号括起来
• 运算符的左右两侧要有空格
• 运算数若只有一个带有单位，则最后结果以此为单位
• 若有多个单位，则以第一个单位为准