Less+响应式布局

less

less介绍：
1. less是一种提高我们编写css效率的技术，专业术语“css预处理器”，less文件后缀名是".less",相同的技术有（scss，stylues）。
2. 在工作中，写样式的地方，都不会直接写在css文件中，而是写在less文件中，再经过插件（easy less vscode）插件自动生成css文件，而我们只要在html结构中引入css文件即可。
可直接link 引入less文件然后点击打开链接会显示找不到less 再点击创建文件就会自动创建切记！！！找到刚刚引入得less文件八后缀改成.css 因为浏览器不能直接识别less文件

3.easy less vscode插件

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

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

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

语法：

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

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

3.less语法--运算：

介绍：

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

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

注意：

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

less语法--混合（mixin）

4.less语法--嵌套

作用：

快速生成后代选择器。

代码如下：

后代：

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

兄弟：

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

子代：

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

伪元素：

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

注意：

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

响应式布局案例 bootstrap技术

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

实现原理：媒体查询

格栅系统重要！！！

在使用bootstrap ui框架的时候不需要书写base.css 样式初始化

媒体查询 +浮动就是bootstrap 就是实现栅格系统的本质！

一般响应式布局的网站不建议使用flex布局

响应式布局包含了pc端和移动端，pc端可能会存在低版本浏览器（ie，8，9，10）

低版本的pc端的ie浏览器，对于css3的支持没有那么优化 flex无效

除非领导要求不管低版本的用户群体就可以正常使用css3的知识过度动画 flex
如何根据要求来编写合理的栅格系统的代码

首先需要观察，当前屏幕在不同的宽度情况下的表现

******默认将一行分为12份 12除以观察到的一行排几个=几份 ***

观察出大屏幕下每一列占几份 col-lg-4

观察出中等屏幕下每一列占几份 col-md-4

观察出小屏幕下每一列占几份 col-sm-12

观察出极小幕下每一列占几份 col-xs-12

媒体查询：

根据屏幕宽度或者高度不同去使用对应的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;
            }
        }

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>

可能最近才领悟到小时候老师,爸妈总说 “态度决定一切” 如今才慢慢领悟其中的含义累并快乐着

# Less+响应式布局