rem适配

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

rem和px的不同：
rem: 网页元素尺寸单位,可以根据屏幕宽度的不同，实现网页元素尺寸不同（等比缩放）
px: 属于绝对单位，不会根据屏幕宽度不同而等比缩放

目标的实现方法：
1，rem：是目前多数企业在用的解决方案
2，vw / vh：未来的解决方案

rem单位：
1，相对单位
2，rem单位是相对于HTML标签的字号计算结果
3，1rem = 1HTML字号大小

rem单位尺寸：

1. 根据视口宽度，设置不同的HTML标签字号
2. 书写代码，尺寸是rem单位
   2.1 确定设计稿对应的设备的HTML标签字号

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5 （移动设备宽度375px）
rem单位的尺寸 = px单位数值 / 基准根字号

rem.jpg

rem移动适配 - 媒体查询

目标：媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
写法：
@media （媒体特性） {
选择器 {
css属性
}
}

@media (width:375px) {
html {
font-size: 37.5px;
}
}

由于移动设备很多，无法每个通过媒体查询一个一个写出来
所以使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

flexible.jpg

less

Less是一个CSS预处理器, Less文件后缀是.less;
扩充了CSS 语言, 使CSS具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

如何使用Less语法快速编译生成CSS代码
Easy Less：
1，vscode插件
2，作用：less文件保存自动生成css文件

EasyLess.jpg

less语法

一，注释
单行注释
语法：// 注释内容
快捷键：ctrl + /

块注释
语法：/* 注释内容 */
快捷键： shift + alt + A

二，运算
加、减、乘直接书写计算表达式
除法需要添加 小括号
注意点：
1,单位没有顺序之分,如果一个表达式之中有多个单位,以第一个单位为准
2,运算符的前后,要么都加空格隔开,要么都不加

less运算.jpg

三，嵌套
嵌套写法：
1.生成后代选择器
.box {
width: 200px;
height: 200px;

.title {
    background-color: #ff0;

    .left {
        margin-left: 100px;
    }
}

}

2.生成子代选择器 >
.father {
background-color: aqua;

> .son {
   background-color: orange;

    > .sun {
        background-color: red;
    }
}

}

3.交集选择器 &符号指代的是直接上级
.box {
background-color: #ff0;
&.box1{
background-color: aqua;
}
}

4.并集选择器
.box {
&,.box1{
background-color: red;
}
}

5.伪类选择器 :hover
.box {
a:hover {
background-color: #ff0;
}

a {
    &:hover {
        background-color: #ff0;
    }
}

li:hover {
    a {
        background-color: #ff0;
    }
}

li {
    &:hover {
        a {
            background-color: #ff0;
        }
    }
}

}

6.添加伪元素
.box {
img::before {
content: '';
}

img {
    &::before {
        content: '';
    }
}

}

7.结构伪类选择器 直接写在选择器的后面是没有提示的
.box {
li:first-child {
margin: 0 auto;
}

li {
    &:first-child {
        margin: 0 auto;
    }
}

}

四，变量
变量 @变量名: 值;
作用：节约维护成本
变量名看做是一个存值的容器
写法：
@themeColor: blue;

body {
background-color: @themeColor;
}

.header {
background-color: @themeColor;

p {
    background-color: @themeColor;
}

a {
    background-color: @themeColor;
}

}

五，导入
写法：
@import url(你要导入的文件路径);
@import '你要导入的文件路径';

六，导出
// out: ../css/
注意点:
1,路径如果表示文件夹,结尾一定要有/
2,属于less配置信息,一定要写在第一行,如果写在第二行,那么第一行不能再学任何内容

七，压缩导出
语法：
// compress:true
作用：节约成本,让网页渲染的更快

// compress:true,out:../css2/
注意：如果多个配置一起写,配置与配置之间以英文逗号隔开