less+响应式布局

less

专业术语：css预处理器

常见的三种css预处理器：scss、less、stylus。

浏览器不能直接识别它依靠编译工具将它编译成css文件

less使用过程

less调错

当引用的变量出错时，左下角会有一个警告，点进去就会有提示哪一行出错。

less变量

固定语法： @+任意的名称（有语义的英文）

作用：把一些css的属性值设置在一个地方，实现一改全改。

代码：

less运算

在less文件可以直接加减乘除，但是 ==除法== 需要加 ==括号==，编译的css文件直接可以直接得到样式结算后的值。

代码：

less混合（mixin）

将公共的css代码封装一起使用

定义一个mixin

.mix() {
 
}

谁需要用到mixin，就调用

.one {
   
    .mix();
    
}

完整代码：

//  1. 定义一个mixin
.mix() {
    width: 200px;
    background-repeat: no-repeat;
    background-size: 200px;
}
.one {
    // 2.调用mixin
    .mix();
    background-image: url(../images/1.jpeg);
}

.two {
    .mix();
    background-image: url(../images/2.jpeg);
}

.three {
    .mix();
    background-image: url(../images/3.jpeg);
}

less混合动态传入数据

使用场景：多个类名使用精灵图

将mixin里添加形式参数（下面的参数：@a, @b）

.mix(@a, @b) {
    width: 200px;
    height: 300px;
    background-color: gray;
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: @a @b;   
    background-image: url(../images/1.jpeg);
}

调用的参数为实际参数

.one {
    .mix(0px, 30px);
}

完整代码：

.mix(@a, @b) {
    width: 200px;
    height: 300px;background-color: gray;
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: @a @b;   
    background-image: url(../images/1.jpeg);
}

.one {
    .mix(0px, 30px);
  
}

.two {
    .mix(10px, 0px);
 
}

.three {
    .mix(20px, 10px);
  
}

less嵌套

后代：

/* 后代 */
div {
    p {
        span {
            color: red;
        }
    }
}

兄弟：

/* 兄弟 */
div{
    p{ color: aqua;}
    span{color: pink;}
}

子代：

/* 子代选择器 */
div{
    >p{
        span{
            color: pink;
        }
    }
}

伪元素：

div{
    p{
        &::before
            {
            content: "";
            color:blue ;
            }
    }
    
}

补充：

设置浏览器文字不换行

white-space:nowrap

响应式布局

只写一套代码，可以在pc端运行（体验不错），还可以在移动端上运行（体验不错）。

实现原理：媒体查询

媒体查询：

根据屏幕宽度或者高度不同去使用对应的css代码。

语法（简洁）：

当屏幕宽度为400时，网页背景颜色变成红色

  @media(width:400px) {
            body {
                background-color: red;
            }
        }

常见推荐写法：

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

指定区间：

  @media screen and (min-width: 400px) and (max-width:800px) {
            div {
                width: 50%;
                float: left;
            }
        }

Bootstrap

响应式布局的UI框架

实现响应式布局的核心技术：媒体查询+浮动

栅格系统：（boostrap的核心）

boostrap将屏幕按照宽度分成四种：

大屏幕	中等屏幕	小屏幕	极小屏幕
lg（large）	md（middle）	sm（small）	xs （extra small）
>1200px	992px-1200px	768px-992px	<768px

固定用法：

先外层写一个类名字是固定的 container
里面写一个类 row固定
根据需求（在什么样的屏幕下一行显示几个元素）

boostrap默认将一行划分成了12分 12列 1列占一份

 <div class="container">
        <div class="row">
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">1</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">2</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">3</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">4</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">5</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">6</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">7</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">8</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">9</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">10</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">11</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-12">12</div>
        </div>
    </div>

我的移动web学习第七天