就是设计稿会给宽度，比如说是375那你可以得出1vw就等于375/100=3.75px，然后比如说你要写的这个元素是100px，就拿100px/3.75就等于26.6vw，你写了vw单位之后，在移动端视口标签作用下不同的视口会有不同的大小，会自动等比例变大

vw vh的基本认知以及使用

vw：相对单位相对于屏幕 100vw等于屏幕宽度

vh：相对于屏幕宽度。

为什么使用vw单位

方便进行移动端适配，利用vw相对于屏幕宽度相应的进行变化的特点，我们可以在不同的屏幕下看到不同大小的元素。非常的方便。

如何使用：

一般我们在进行移动端开发的时候都会拿到一份设计图，。从图中我们可以获得具体数据。将其等比例变化为vw即可。

可以使用calc函数进行运算。不过这种方式比较繁琐。我们一般利用第三方插件进行转换。将设计图的大小改到第三方插件哪里

rem:

相对于根标签的文字大小：例如html的文字大小是100px 1rem就是100px

rem的作用：

如何使用rem单位做屏幕适配？

回顾vw做屏幕适配的过程：屏幕的宽度改变=>页面中使用了vw作为单位的元素随之改变

rem屏幕适配原理

屏幕宽度发生改变=>使用媒体查询让html的字体大小改变=>页面中使用了rem单位的元素发生改变

媒体查询:

语法：@media screen and（）{

html{fost-size}

}

你看我怎么变都好所以接下来同学们，如何解决给大家一个解决方案很早的时候我们页面的单位有rem 但是没有vw 所以那些公司vw单位的，有手机淘宝的一个团队，研究这个问题他们就同故宫一段js代码来实现这个功能了以后其他公司的人想要实现这个功能，就需要引入淘宝团队写好的一段js代码即可

引入一段手机淘宝写好的代码（flexible.js）

less

less变量

使用方法：@变量名（尽量带有语义）：css样式

例：@color：red。

div{color：@color}

方便对某种主题或者多次出现的样式进行统一修改

less运算

less可以进行css运算

例：div{width：100px-50px}

注意：除法要加括号

less混合

less可以将一大堆代码放在一起调用

使用方法：.混合名（）{里面写样式} 通过.混合名调用还可以传送实参

例如:.name(a,b){

color:red;

background-position:a,b

}

div{.name(-100px,-100px)}

less嵌套:略

单行文本溢出显示省略号

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

多行：

display: -webkit-box; overflow: hidden; white-space: normal!important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical;

bootstrap的基本使用

重点：栅格系统

栅格系统把屏幕平均分为12等份

它提供了container类版心居中大容器和container-fuliud全屏容器。

其结构为

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
</div>

row代表行，col-md-4代表中等屏幕下一列多少份

大屏为lg（large），中屏为md（middle），小屏为sm（small），超小屏为xs（）

栅格系统实现原理

浮动加媒体查询

栅格系统补充代码

在某种屏幕小显示隐藏

例如：col-md-hidden

例如：col-md-visiable

掌握：能看文档使用bootstrap的功能

例如：导航。轮播。一些简单的类名

vw,vh.rem单位。bootstrap框架。less