Web移动端第七天

less
响应式网站
1. 媒体查询
2. bootstrap

less

网页中引入的是css文件，并不是less文件，浏览器不能直接识别他，依靠编译工具将他编译成css文件

原理

less是作为css预处理器，还有其他的css预处理器如scss和stylus

作用

提高我们编写css效率的工具

使用

当我们要修改主题颜色的时候，只需要修改一个地方即可，懂得了使用less变量技术，就可以做到改一个地方即可

less变量

变量会变化的数据

固定语法@+任意名称(有语义的英文)

变量作用：把一些css属性设置在同一个地方，实现一改全改

定义变量

使用变量

@font-size:20px;
// less变量技术统一设置样式，到时候修改的话只用修改一个地方就可以了
div{
    font-size: @font-size;
}
p{
    font-size: @font-size;
}
span{
    font-size: @font-size;
}

less运算

加 width:100px + 200
减 width:200px - 100
乘 width:100px * 2

除 width:(200px / 2)

// 默认的css不支持运算 用cals（）来包裹
// less支持运算

@fontsize: 20px;

div{
    width: 200px + 100px;
    height: 300px - 100px;
    height: 100px * 3;
    // 除法要加括号
    width: (300px / 3);
    font-size: @fontsize * 2;
}

less混合mixin(把一坨代码封装到一起方便使用)

定义混合

使用

.aaaaa(@a1,@a2){
    background-image: url("./images/1.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: @a1 @a2;
}

div{
    .aaaaa(-300px,50px)
    // background-position: -300px 50px;
}

less嵌套

// <div>
// <p>
//     <a href="#">
//         <img src="./images/1.jpg" alt="">
//     </a>
// </p>
// <span></span>
// </div>

// 可以把伪元素看作一个子元素
//  ：：前面要用&连接起来
// >子代选择器
div{
    p{
        a{
            img{

            }
        }
    }
    >span{}
}
.box{
    height: 100px;
    background-color: pink;
    &::before{
        content: "这是一个伪元素";
    }
}

工作中流程

我们写样式代码直接写在less中
通过插件来吧less文件编译成我们熟悉的css文件
网页中来引入编译好的css文件

使用less的过程

新建一个less文件(后缀名就是**.less**)
会按照less语法要求在less文件中编写代码
通过easy less vscode插件来编译less文件
会生成对应的css文件
在网页中直接引入编译好的css文件即可

响应式网站

什么是响应式网站？

一套代码，可以在PC端和移动端实现布局，效果不错

实现原理：媒体查询

媒体查询

作用：

可以做到根据屏幕的宽度、高度的变化去使用对应的css代码

语法：

语法1

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

语法2

/* 媒体查询语法2 */
        @media(width:600px){
            body{
                background: pink;
            }
        }

推荐语法

/* 媒体查询推荐语法 */
        @media screen and (height:600px) {
            body{
                background-color: yellowgreen;
            }
            
        }

媒体查询指定区间

 /* 当屏幕的宽度 小于100px red (最大就是100px) */
        @media screen and (max-width:100px) {
            body{
                background-color: red;
            }
        }
        /* 当屏幕的宽度 大于500px green (最小就是500px) */
        @media screen and (min-width:500px) {
            body{
                background-color: green;
            }
        }
        /* 当屏幕的宽度 大于300px 小于500px yellow) */
        @media screen and (min-width:300px) and (max-width:500px) {
            body{
                background-color: yellow;
            }
        }

bootstrap

要使用bootstrap之前一定要把所需要的包引入好

1.引入bootstrap.css包
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
2.引入jQuery.js包
<script src="./lib/jquery-1.12.4.js"></script>
3.引入bootstrap.js包
<script src="./lib/bootstrap/js/bootstrap.js"></script>

原理：响应式布局的UI框架

栅格系统(重点)

原理：实现响应式布局的核心(媒体查询+浮动)，也是bootstrap的核心

划分了4种宽度不同的屏幕

屏幕大小	像素单位	简写
大屏幕	＞1200px	lg
中等屏幕	992px-1200px	md
小屏幕	768-992px	sm
极小屏幕	＜768px	xs

使用步骤

先外层写一个类名字固定container
里面写一个类row(固定)
根据需求(在什么样的屏幕下一行显示几个元素，bootstrap默认将一行划分为12份，一列就占一份)
要想好代码在每一种屏幕下的改变
1. 大屏幕下一列占一份
2. 极小屏幕下一列占两份
3. 变成中等屏幕
  
  仅仅是因为bootstrap自己额外做了设置而已
  
  自动设置了让较大的屏幕去沿用较小屏幕的设置

思考

一般情况下，响应式布局的网站建不建议用flex布局？

不建议，**1.**响应式布局包含了PC端和移动端，PC端可能会存在较低版本的浏览器（ie，8，9，10）低版本的PC端的ie浏览器，css3的支持没有那么优化 ---会导致flex无效。**2.**特别情况下，如经理说明，不用管低版本浏览器ie--就可以正常使用所学习过的css3知识如过渡、动画、flex。

小结

旧的项目用旧的bootstrap
新的项目用新的bootstrap
我们没改动代码但是效果却对应不上的话有可能是引入的第三方库版本不一样导致
从中我们学到了什么
1. 我们调试错误的范围更大了
2. 老师演示中的调试错误的方法已经出现错误的情形工作当中会经常出现
如何解决？
1. 直接使用旧的bootstrap的版本
2. 建议老板使用新的版本----接受有一些布局细节和旧版本不一致的情况
3. 使用新版本，哪里不一样再去调哪里(不建议，可能工作量会非常大！！！)
如何使用第三方UI框架
1. 我们对于他不熟悉---随便改一些代码都有可能出错，这是不可避免的
2. 学习过程，加一点代码然后去看一下效果
3. 写完一个模块后，简单总结，避免下次再次出现
4. 重复以上的过程，我们使用起来就会越来越熟悉，自然就知道那些能改那些地方不能改了，我们的调整能力也能得到加强。