移动web

less的使用

页面有一种主题色（天猫。京东红色。美团黄色。饿了吗蓝色）
1. 当我们要修改主题颜色的时候，只改一个地方即可
  
  懂得了使用less 变量计算就可以做到改一个地方即可
2. 固定语法 @+任意的名称（有语义的英文）
  - 变量：作用把一些css的属性设置在一个地方，实现一改全改


// 设置变量
@font-size:20px;
@color : blue;
@width: 750px;

div{
    color: @color;
    font-size: @font-size;
    width: @width;

}
p{
    color: @color;
    font-size: @font-size;
    width: @width;
}

less运算

@font-size:20px;
div{
    width: 100px * 2;
    height: 200px * 2;
    // 算除法必须加括号
    height: (400px / 3);
    //  div字体大小是 变量的两倍
    font-size:@font-size * 2 ;
}

less混合mixin

吧一大段css代码都堆在一起方便使用

// 定义mixin变量
.cccc(@a1,@a2){
    width: 200px;
    height: 200px;
    background-image: url(1.jpg);
    background-repeat: no-repeat;
    background-position:@a1 @a2;

}

div{
    .cccc(200px,20px);
     
   
}
p{
    .cccc(-50px ,200px)
}
a{
    .cccc(-30px , 100px)
}

less 嵌套

嵌套后代变成子代选择器 >

伪元素！！！ &：：before

.box{
    &::after
    p{
        font-size: 100px;
        color: aqua;
        img{
            width: 500px;
            height: 500px;
            background-color: aqua;
        }
    }
    i{

        width: 200px;
        height: 50px;
        background-color: black;
    }

}

额外补充

设置浏览器对于文字都不要换行
```
white-space: nowrap;
```
第一行文字末尾出现省略号

这三行作为一个整体一起去记

   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

可以指定第N行出现省略号记不住拷贝来使用

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

less语法的总结

less语法
1. 变量方便快速去修改样式
2. 运算 less 支持数学运算
3. 混合mixin
  
  把一大段css代码都堆在以前方便使用

响应式

以前写代码要么只写pc端（一套），要么只写移动端（一套）
响应式
1. 只写一套代码，可以在pc端运行（体验不错），还可以在移动端上运行（体验也不错）
2. 在真实的开发当中想要开发出来响应式的网站使用第三方的ui框架来实现

响应式实现原理的本质

响应式布局的网站实现的原理
1. 根据屏幕宽度不同去使用不同的css
  1. 假如屏幕比较宽里面宽度去设置 50%
  2. 假如屏幕比较窄里面宽度去设置 25%
根据屏幕宽度不同去使用不同的css = 专业术语 = 媒体查询

媒体查询

可以根据屏幕宽的不同去使用不同的css

媒体查询语法

  /* 媒体查询语法 */
        /* @media (width:400px){
            body{
                background-color: red;
            }

        } */

常见的推荐写法

  @media screen and (width:400px){
            body{
                background-color: yellow;
            }
            
        }

不只是可以针对宽度屏幕还可以针对屏幕的高度（少用了解即可）

    @media screen and (height:599px){
            body{
                background-color: violet;
            }
            
        }

当屏幕宽度小于100px red （最大就是100px）

 @media screen  and (max-width:100px){
            body{
                background-color: yellow;
            }
            
        }

当屏幕的宽度大于 500px gree （最小就是500px）

  @media screen and (min-width:500px){
            body{
                background-color: green;
            }
        }

当屏幕的宽度大于 300 小于500px yellow

  @media screen and (max-width:300px) and (min-width:500px){
            body{
                background-color: yellow;
            }
            
        }

练习题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box1{
            background-color: chartreuse;
        }
        .box2{
            background-color: blue;
        }
        .box3{
            background-color: grey;
        }
        .box4{
            background-color: pink;
        }
        @media screen and (max-width:400px){
            div{
               /* 默认情况下 占一条 */
            } 
        }
        
        @media screen and (min-width:400px) and (max-width:800px){
            div{
                float: left;
                width: 50%;
            }
            
        }
        @media screen and (min-width:800px){
            div{
                float: left;
                width: 25%;

            }
            
        }
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>

        <div class="box3"></div>
        <div class="box4"></div>
</body>
</html>

bootstrap框架

bootstrap将屏幕按照宽度分成四种
1. 大屏幕 lg >1200px
2. 中等屏幕 md 992px - 1200px
3. 小屏幕 sm 768px - 992px
4. 极小屏幕 xs <768px

栅格系统

固定用法
1. 先外层写一个类名字是固定的 container
2. 里面写一个类 row 固定
3. 根据需求（在什么样的屏幕下一行显示几个元素）
  
  bootstrap 默认将一行划分成了12份 12列 1列就占一份

栅格系统 - 深入研究

如果一行超过了12份和浮动的特性一样往下掉
.container 居中的版心宽度会跟随屏幕宽度的变化而变化（不用管多少px 版心会自动调整大小就可以了）
1. 有些时候网页设计需要版心 container
2. 全屏 .container-fluid
只要写了栅格代码，那么就不能省略 container（版心） -container-fluid（全屏）
要想好代码在每一种屏幕下的表现
1. 大屏幕下一列占一份
2. 极小屏幕下一列占两份
3. 变成中等屏幕
  
  仅仅是因为 bootstrap自己额外做了设置而已
  
  自动设置了让较大屏幕去沿用较小屏幕的设置
如何根据需求来编写合理的栅格系统的代码
1. 要自己去观察当前的页面在不同宽度下的表现
  
  观察出来大屏幕下每一列占几份 col-la-4
  
  观察出来中等屏幕下每一列占几份 col-md-4
  
  观察出来小等屏幕下每一列占几份 col-sm-12
  
  观察出来极小屏幕下每一列占几分 col-xs-12
```
 <div class="container">
        <div class="row">
            <div class="col-la-4 col-md-4 col-sm-12 col-xs-12" ></div>
        </div>
    </div>
```