vw/vh（有插件）

vw 相对长度单位 相对于视口 宽度

100vw等于屏幕宽度

vh 相对长度单位 相对于视口 高度

100vw等于屏幕高度度

作用：实现移动端适配

一套代码 是实现大一点的屏幕 开起来的元素就越大

小圆点的屏幕 开起来里面的元素就越小

计算

运算符两侧必须加空格

width：calc（100*50/n）；

rem布局（有插件）

1.流式布局和flex布局主要针对宽度布局

2.rem布局主要针对元素高度和宽度等比例缩放

em和rem（1---10）

1.em相对于父元素的字体大小来决定的

2.rem相对于html元素字体大小来决定的

代码：

body{
font-size:10px;
}
div{
font-size:10px;
width:10rem;
height:10rem;
}
p{
width:10em;
height:10em;
}

计算公式：

必须引入js：（有手淘团队研究-直接拿开发flexible.js库）

代码样式：

css弊端

less是一种提高我们编写css效率的奇数=》css预处理器—（less，scss，stylues，技术名词）

1.我们写样式代码 直接写在less文件中

2.通过插件 来吧less文件编译成 我们熟悉的css文件

3.网页中引入 编译好的 css文件！！！

语法：

1.变量 方便快速去修改样式

2.运算less支持数学运算

3.混合mixin 把一大段css代码都堆在一起 方便使用

4.嵌套 让我们按照html的嵌套结构来编写css嵌套

5.如何制定 编译的css文件存放在哪里

这个只是不重要！！！使用easy less 指定生成的css目录位置，这个技术以后工作中用不到。

后期会有其他变异工具同意处理css的生成目录

网页中引入的文件

是less文件还是css文件!! less

工作中我们开发中编译的文件是less文件；

less

声明一个变量 @ 开头：XXX

less运算

除法要添加括号

less混合mixin

定义：

.开头+小括号+大括号

使用：.+名字

（@x,@x）

（less）html嵌套

less嵌套中

1.嵌套 后代 变成子代选择器 前面加 >

2.伪元素就是div的子代

（注意：：：前面不能出现空格）

（解决：前面加&连接符）

换行

插件： 1.px2vw 2.px to rem & rpx（cssrem） 3. easy less