rem：目前多数企业在用的解决方案 vw / vh：未来的解决方案
rem是相对单位
rem单位是相对于html标签的字号计算结果
1rem=1html字号大小
媒体查询：
1.
/* 1，以视口宽度为375为例 我们使用媒体查询 */
/* screen屏幕 and条件 可以省略*/
@media screen and (width:414.4px) {
html {
font-size: 60px;
}
}
@media(width: 375.2px) {
html {
font-size: 20px;
}
}
/* 2.适配414宽度 的手机 */
@media (width:414.4px) {
html {
font-size: 40px;
}
}
rem适配原理 目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
l rem单位尺寸
1. 根据视口宽度，设置不同的HTML标签字号
2. 书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
Ø N * 37.5 = 68 → N = 68 / 37.5
Ø rem单位的尺寸 = px单位数值 / 基准根字号
px端：
min最小 max最大 and和
@media (max-width:1366px) {
.box {
width: 400px;
height: 500px;
background-color: red;
}
}
@media (min-width:1366px) and (max-width:1450px) {
.box {
width: 400px;
height: 500px;
background-color: gold;
}
}
@media (min-width:1450px) {
.box{
width: 400px;
height: 500px;
background-color: hotpink;
}
}
flexible.js:
1.flexible.js是手淘开发出的一个用来适配移动端的js框架。
2.核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
less:
l 单行注释
语法：
// 注释内容
快捷键：ctrl + /
块注释
语法：
/* 注释内容 */
快捷键： shift + alt + A
计算
运算：
l 加、减、乘直接书写计算表达式
l 除法需要添加 小括号 或 .
l 注意：
表达式存在多个单位以第一个单位为准
导入
@import "你要导入的文件路径";
配置属性 要写在第一行
导出
注意点：
1.css导出路径，后面一定要写/,如果不写只是普通的文件名
2.less配置信息，一般要写在第一行
禁止导出
out：false
压缩导出
compress:true
