2020-03-20 rem+less（十三）

rem布局

• 主要用于解决不同屏幕的适配问题，rem能够等比例适配所有屏幕
• 流式布局：虽然可以让各种屏幕都适配，但是显示效果不友好，只有较少的尺寸可以实现完美的效果（目前使用流式布局的公司较多：亚马逊，京东，携程）
• rem布局：rem能够适配所有的屏幕，与less配合使用效果较好（目前使用的公司：淘宝，苏宁）

rem是什么

• rem是指相对于根元素的字体大小的单位，是一个相对单位
• 使用px的地方都可以使用rem替换，1rem=html的font-size的大小
• 一旦html的font-size发生了改变，那么rem的大小也会发生改变

rem与高度自适应

• 因为rem的基准点是根元素html的字体大小，因此我们只需要设置不同屏幕的html的font-size的大小就可以达到适配的目的

媒体查询

• 媒体查询是css3提出的一个新的属性，通过媒体查询可以查询到screen的宽高，从而指定某个宽度区间的网页布局

语法：

@media screen and (条件) {

满足条件加载的css内容

}

条件说明：

1. min-width：320px ； 最小宽为320（320以上的设备）
2. max-width：640px；最大宽为640（640以下的设备）
3. width：540px； 宽度等于540

注意点：

1. 媒体查询仅仅提供一个条件，不会提升权重，所以一般媒体查询写在最下面
2. and前后一定要有空格

rem与媒体查询

• 使用rem配合媒体查询可以适配多个终端
• px转rem的公式：px/html的font-size的值
• 动态计算不同屏幕的对应的font-size的值：当前屏幕/（设计图的宽/基于设计图的font-size）

举例：

750的设计图，50的font-size；要求写出375的屏幕

计算：750 / 50 = 375 / 当前屏幕对应的font-size

LESS

学习网站：官网http://lesscss.org/ 中文网http://lesscss.cn/

简介

1. less本质上是一个超集，具备css的一切功能，同时具备css不具备的功能
2. 浏览器不认识less，使用插件easy less，转译为css，引用css文件让浏览器识别、

安装插件（vscode）

点击扩展——搜索easy less——安装——重新加载——安装成功后，当我们编写less并保存的时候，会自动在当前目录下生成一个同名css文件

LESS语法

注释

1. // less的注释，css文件用不了，生成的css文件中不会显示
2. /* */ 属于css注释，因此会编译到css文件中

变量（可以变化的量，方便维护）

• 格式：@自定义变量名：对应的取值；

@mainColor: yellow;

.box {

color: @mainColor;

background-color: @mainColor;

border: 1px solid @mainColor;

}

嵌套（混入）

• 可以在一个选择器中嵌套另一个选择器来实现继承，可以减少代码量，是代码更加清晰

1. 后代选择器 直接写在大括号里面即可
2. 子代选择器 直接 > 即可
3. 交集选择器 使用&符号，表示自己
4. 并集选择器 直接使用 ，
5. 伪类选择器 使用&符号表示自己，例如&::hover

6. 伪元素选择器 使用&符号表示自己 （与伪类选择器一致）

   
   
   image.png

less数学运算

• less可以支持运算

// less可以拥有计算能力

.box {

width: 100 + 200px;

height: 50 * 2px;

font-size: 320 / 15px;

}

less函数的使用

• 有一些公共类我们可以提取出来，用的时候调用

步骤

1. 声明 .函数名（）{公共的css}
2. 使用 .box{ .函数名(); };

特点：

1. 函数不会被编译到css中
2. 函数可以在选择器中调用

less函数的参数传递

• 参数的传递过程：调用函数的时候将函数小括号的值传递给函数里面的变量，如果调用函数的小括号里面没有值会使用默认值

// 声明函数

.br(@val: 20px) {//默认值写法@函数名：数值

/* 标准写法 */

border-radius: @val;

/* 私有前缀的写法 */

-webkit-border-radius: @val;

/* 私有前缀的写法 */

-ms-border-radius: @val;

/* 私有前缀的写法 */

-o-border-radius: @val;

/* 私有前缀的写法 */

-moz-border-radius: @val;

}

.box {

// 调用函数

.br(5px);

}

.box2 {

.br(10px);

}

引入less文件

• 一个页面需要引入多个css文件，现在我们在less文件中引入多个less文件，这样就可以在html页面只引入一个css文件

格式：

@import '需要引入的less文件的路径'；

注意：一般引入less文件写在最前方，放置覆盖