移动端适配

rem

rem是相对于根标签（html标签）字号大小的单位**（相对长度单位）**

1rem=根标签字号大小 例

html {
    font-size:20px;
}
那么1rem=20px

rem移动适配

引入手淘js文件，安装 px to rem & rpx (cssrem)插件，再去设置里的配置文件写 "cssrem.rootFontSize": 37.5,

公式：适配屏幕div宽度=10rem*设计稿div宽度/设计稿宽度

vw

**vw：相对长度单位（相对于适配屏幕视口）

100vw表示沾满整个屏幕视口 例如：

视口宽度为375px 那么
100vw=375px
1vw=3.75px

vw公式

适配屏幕div宽度=100vm*设计稿div宽度/设计稿宽度

whith-space：nowrap；让文字不换行

less语法

less是一个css预处理器，less文件后缀是.less。

less文件内有计算能力

编译插件：Easy Less

vsocde插件，可以使less文件保存自动生成对应的css文件。

运算

加减乘直接书写计算表达式

除法需要添加小括号或. 例如：width：100./100 width：（100/100）

变量名取值：

@变量名：属性（给变量名定义属性，方便后面需要这个属性然后调用变量。

定义
@mane：red；
调用
.box {
    color:@mane;
}

less嵌套：

父元素样式内嵌套后代选择器（可以无限套娃）。

div {
    color:red;
    p {
        color:@mane;
        a {
            font-size:20px;
       }
   }
}

父元素样式内嵌套伪类或者伪元素使用"&"和父元素连接。

div {
    color:@mane;
    &:hover {
        color:#fff;
      }
    &::before {
        content:"";
        display:flex;
        width:100px;
        height:100px;
      }
}

响应式布局

下载bootstrap：v3.bootcss.com/ 引入bootstrap.css样式文件、jquery.j文件、bootstrap.js文件。

    <link rel="stylesheet" href="./less/bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="./less/04-bootstrap/lib/jquery.js"></script>
    <script src="./less/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

栅格系统:

类名**.container**版心 自带15内边距

类名row 自带-15外边距

.container嵌套.row，可以互相抵消内外边距

.container 固定宽度1170px

.container-fluid 100%宽度

container-fluid 流式布局容器

container 响应式布局容器

类名container版心分为一行12列

屏幕区分：

大屏幕（≥1200px） —— lg

中等屏幕（1200px>取值≥992px） —— md

小屏幕（992px>取值≥768px） —— sm

极小屏幕（<768px） —— xs

col-lgmd/sm/xs-取值1~12，表示四种屏幕中container版心.row内一行分多少列。

<div class="container">
     <div class="row">
          <div class="col-lg-12 col-md-3 col-sm-6 col-xs-12"></div>
     </div>
</div>