前端学习（十一）rem布局

rem

• 概念：rem（root em）是一个相对单位，类似于em

单位	说明
em	em是父元素的字体大小
rem	rem是html元素的字体大小

• 优点：父元素字体大小可能不一样，但是只有一个html，可以用来整体控制大小

媒体查询

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

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

媒体查询语法规范

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

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

1. mediatype 查询类型

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

值	说明
all	用于所有设备
screen	用于电脑屏幕、平板电脑、智能手机等
print	用于打印机和打印预览

1. 关键字

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

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

1. 媒体特性

   每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

   注意他们要加小括号包含

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

1. 媒体查询书写规则

注意： 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

引入资源

针对查询到的不同宽度，引入不同的css文件

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
           

less的简单使用

• css的弊端
  • 是非程序式语言，没有变量、函数、SCOPE（作用域）等概念
  • CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的
  • 不方便维护及扩展，不利于复用
  • CSS 没有很好的计算能力
  • 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目
• less的介绍
  • Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
  • 做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
  • 它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情
  • Less中文网址：lesscss.cn/
  • 常见的CSS预处理器：Sass、Less、Stylus
• less安装
  • 安装nodejs，网址：http://nodejs.cn/download/
  • npm install -g less 安装less
• less编译
  • 安装vscode插件Easy LESS
• less使用示例

@color: pink;

div:first-child {
    background-color: @color;
}
div:last-child {
    background-color: @color;
}
           

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

less嵌套

• 示例

<div>
	<a href="#" target="_blank" rel="external nofollow" >123</a>
</div>

div {
    a {
        color: red;
    }
/* 如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接 */
    &::before {
        content: "qqq";
    }
}
           

less运算

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

• 示例

// 写法1 在变量中写
@fontsize:20px + 5;

//写法2 在样式中写
a {font-size: @fontsize + 10;}

//写法3 颜色的计算
a {background-color: #555 + #111;}
           

• 注意事项
  • 运算符中间左右有个空格隔开
  • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位
  • 两个数都有单位，则结果以第一个为准

rem适配方案

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

技术方案：

• less+rem+媒体查询
• lflexible.js+rem