移动web第7天

一、less的基础知识

在工作中写样式的地方都不会直接写在 css文件中，写在 less文件里面

1 less是什么东西？

less是一种提高我们编写css效率的技术 => css预处理器（less,scss,stylues 技术名词）

less工作流程

我们写样式代码直接写在 less文件中

通过插件来把 less文件编译成我们熟悉的 css文件

网页中来引入编译好的 css文件！！

2 网页中引入的文件？工作和开发中，我们直接编辑的文件是 less文件还是css文件？

浏览器不能直接引用less格式的样式，需要通过css预处理器插件编译出css文件，网页引用的文件依然是.css格式的。工作中，我们更多是在less中编辑css样式。

2 less的语法

变量方便快速去修改样式

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

ps:便于统一定义样式，网页主题样式（如天猫。京东红色。美团黄色。饿了吗蓝色）

// 声明一个变量
@color:yellow; 
div{ 
  color: @color;
  border: 1px solid @color;
}
p{
  color: @color;
}

3 运算 less 支持数学运算

默认的css 不支持运算，使用calc 可以了

less 支持运算


 @fontsize:20px;
 
 div{
   width: 100px + 200px;
   width: 300px - 200px;
   height: 100px * 3;
   /* 使用 easy less 编译 除法 加上括号 */
   height: (300px / 3);

   /* div 字体大小是  变量的两倍 */
   font-style: @fontsize * 2;
 }

4 混合 mixin

把一大段css代码都堆在一起 ,给属性值设置形参 ,类似于函数封装，这样，方便统一修改样式参数。

/* 1 定义一个mixin */
.aaaaaa(@a1,@a2) {
  /* 存放你想要用到一坨代码 */
  background-image: url(2.png);
  background-size: 100%;
  background-repeat: no-repeat;

  /* 背景图片的位置 */
  background-position: @a1 @a2;
}
div {
  /*.aaaaaa();
   background-position: -300px 30px;*/
    
  .aaaaaa(-300px,30px);
}

5 less嵌套编写样式按照html的嵌套结构

根据html嵌套关系，在less文件里书写样式，避免样式关系混乱，使结构更清晰，方便修改，提高书写效率。

ps:使用时，注意语法格式，如:hover、::before等伪类选择器在css中需要紧跟元素后面，不能存在空格，在less书写时，因回车换行会产生空格，需使用“ & ”连接符号连接，去除影响。

less 嵌套中
1 嵌套 后代 变成子代选择器 > 
2 伪元素 ！！！   &::before

 */
/* less中的嵌套   */
.box {
  p {
  }
  	section {
      button {
        color: #000;
    }
  }
  a {
    img {
    }
  }
}

div {
  height: 200px;
  background-color: lawngreen;
  // ::before{ 错误的
  &::before {
    // 正确 要加上一个 & 连接
    content: 'less实现的伪元素';
  }
}

二、响应式布局

根据定义媒体查询的样式，使屏幕宽度不同去使用不同的css，网页布局随屏幕的改变而变化，使得只用写一套代码，便可以得到在pc端运行，还可以在移动端上运行的效果。

1、媒体查询

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

2、媒体查询的写法

/* 最简洁 */
      @media (width:400px){
        body{
          background-color: blue;
        }
      }

      /* 常见和推荐的写法 */
      @media screen and (width:600px) {
        body{
          background-color: yellow;
        }
      }

      /* 不只是可以针对屏幕宽度  还可以针对屏幕的高度（很少用 了解即可） */
      @media screen and (height:599px) {
        body{
          background-color: green;
        }

3、UI框架bootstrap

1、引用样式文件

/*style中引用*bootstrap.css文件*/
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" />   /*bootstrap.css文件*/

/*html底部引用jquery.js、 bootstrap.js文件*/
 <!-- 2 要引入 jquery.js  -->
  <script src="./lib/jquery.js"></script>
  <!-- 3 引入 bootstrap.js -->
  <script src="./lib/bootstrap/js/bootstrap.js"></script>

2、栅格系统

栅格系统（boostrap的核心，也是实现响应式布局的核心媒体查询），bootstrap将屏幕按照宽度分成四种

大屏幕 lg >1200px
中等屏幕 md 992px-1200px
小屏幕 sm 768px-992px
极小屏幕 xs <768px

3、栅格系统的固定用法

先外层写一个类名字是固定 container

里面写一个类 row 固定

根据需求（在什么样的屏幕下一行显示几个元素）

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

当元素超过设定的列数时，和浮动的特性一样，元素自动换行

如果一行超过了12份

.container 居中的版心宽度会跟随屏幕宽度的变化而变化（不用管多少px 版心会自动调整大小就可以了）有些时候网页设计：需要版心 container 、全屏 .container-fluid

设定小屏幕的设置，但大屏幕没设定时，bootstrap使较大屏幕去沿用较小屏幕的设置。

<div class="container-fluid">
      <div class="row">
        <!-- 大屏幕下 一列占一份 ，极小屏幕下，一列2份  -->
        <div class="col-lg-1 col-xs-2">1</div>
        <div class="col-lg-1 col-xs-2">2</div>
        <div class="col-lg-1 col-xs-2">3</div>
        <div class="col-lg-1 col-xs-2">4</div>
        <div class="col-lg-1 col-xs-2">5</div>
        <div class="col-lg-1 col-xs-2">6</div>
        <div class="col-lg-1 col-xs-2">7</div>
        <div class="col-lg-1 col-xs-2">8</div>
        <div class="col-lg-1 col-xs-2">9</div>
        <div class="col-lg-1 col-xs-2">10</div>
        <div class="col-lg-1 col-xs-2">11</div>
        <div class="col-lg-1 col-xs-2">12</div>
        <div class="col-lg-1 col-xs-2">13</div>
      </div>
    </div>

less基本用法与bootstrap的学习