less语法+响应式布局

一、less语法

1、less介绍：

1. less是一种提高我们编写css效率的技术，专业术语“css预处理器”，less文件后缀名是".less",相同的技术有（scss，stylues）。
2. 在工作中，写样式的地方，都不会直接写在css文件中，而是写在less文件中，再经过插件（easy less vscode）插件自动生成css文件，而我们只要在html结构中引入css文件即可。

2、less原由&功能：

1. 解决了css文件不能计算的问题；
2. 可以根据less的语法--变量，解决css相同样式逐个修改的问题，做到了相同样式，设置相同变量名&变量值做到改一点同一样式全部生效；
3. 利用less语法-混合（mixin），实现多个样式相同，单个样式不同的综合写法，如图：
4. 利用less语法--嵌套，解决css选择器书写多样而造成混杂或选错的问题。

原理

less是一个拥有多个功能的单独文件，它可以书写样式，再经过辅助插件转化成css样式，html结构中引入css样式使用即可。

3、less的使用过程

1. 新建一个less文件（后缀名.less）
2. 按照less的语法要求在less文件中编写代码
3. 通过easy less vscode插件来自动生成对应的css文件
4. 在html里直接引入生成好的css文件

4、easy less vscode插件

前言

浏览器不能直接识别less文件。

介绍&作用：

辅助性插件，用来把.less文件转化成.css文件用的，浏览器可以识别css文件。

使用方法

1、直接在插件里搜索下载安装使用即可，无需做其它动作；

2、创建less文件，然后按保存，会自动生成css文件；

3、引入css

5、less语法-变量：

前言：

网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？

方法一：逐一修改属性值（太繁琐）

方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

语法：

定义变量：@变量名：值；

使用变量： css属性：@变量名；

用法：

s

6、less语法--运算：

介绍：

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

除法需要添加 小括号 或在除于号前面加个 “.”。

用法：

注意：

1. 除法需要添加 小括号 或 “.”；
2. 表达式存在多个单位以第一个单位为准；
3. 运算符前后要用空格隔开。

7、less语法--混合（mixin）

图解：

8、less语法--嵌套

作用：

快速生成后代选择器。

语法：

注意：

“&”不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用；

总结：

二、响应式布局

介绍：

通过“媒体查询”，实现，只写一套网页代码就能在移动端和pc端运行，而且两者的体验效果都不错。

原理：

通过媒体查询，识别移动端屏幕宽度，然后去使用不同的css。

应用：

题目：

解答：

ui框架（bootstrap）

说明&作用：

1. 在真实的开发当中 想要开发出来响应式的网站，需要使用第三方的ui框架来实现。

2. 里面有很多框架，只要我们有需要，可以直接复制粘贴，再稍作调整就可以得到想要的效果，能加快前端工作人员的代码书写速率。例如：导航条。

   -----这些框架都有响应式布局的特点。

用法：

1. 在html中引入下载好的样式!

2. 引入下载好的js文件

   注意js引入顺序不能改变，jquery.js在前面。

3. 再在bootstrap官网中寻找需要用到的框架，然后复制代码，在html结构中粘贴，再把自个的内容输入进去，把样式稍作调整就可以了，例如：轮播图

   1. 在浏览器里打开v3版本的bootstrap网页：

   2. 选取：

   3. 找到轮播图区域

   4. 复制里面的代码

   

   5. 直接在html结构中粘贴使用

      

   6. 经过4、5图片步骤判断，引入到html结构中后，直接在相应区域写上自己的内容即可，如“图片、数字（上图蓝色圈圈里）”。

   7. 要是跑起来效果和设想有差异，只需要设置另外类名或id名，在样式中稍作修改即可，如

   

   效果：

注意：

bootstrap有多个版本，效果会不一样。

ui框架“栅格系统”介绍（重要）：

介绍：

1. 栅格系统是bootstrap封装好的一种技术（媒体查询），更加方便我们来使用。
2. 它是为处理没有固定内容框架，但也要响应式布局元素而产生的。
3. 媒体查询+浮动，就是bootstrap实现栅格系统的本质！

原理：

把屏幕宽度分为十二等份，再让每个元素在不同终端上面所占的份数设置不同，好比如：在800px宽的终端上，设置一个元素占三份，那一行上就只能放四个元素；而在1200px宽的终端上设置一个元素占一份，那一行上就能放十二个元素。很明显，这样做没有让元素过于大或过于小，大小始终保持在那个范围内，屏幕宽的终端，一行上就多放几个，屏幕窄的终端就少放几个，换行显示，从而达到响应式布局的效果。

属性（类似表格结构）

1. 容器
   1. 类名为“container”：默认版心居中；
   2. 类名为“container-fluid”：全屏显示。
2. “行”，类名为“row”
3. "列"
   1. 大屏幕(>1200px)：col-lg-份数；
   2. 中屏幕(992px-1200px)：col-md-份数；
   3. 小屏幕(768px-992px)：col-sm-份数；
   4. 极小屏幕(<768px)：col-xs-份数。

应用：

1. 先容器；

2. 再写行；

3. 给元素在不同种类屏幕上设置不同的份数。

   图解：

注意：

栅格系统不能加左右间距。

总结：

三、拓展

1. 
2. 
3. 
4. 
5. 
6.