目录

01 媒体查询

02 rem 和 em 单位的使用

03 css 预处理语言

04 布局容器

05 栅格系统

---

 

01 媒体查询

        主要作用：

                能够检测不同的媒体设备以及媒体类型和尺寸大小从而生效不同的出css代码

                实现响应式效果

        语法格式：

                @media 媒体规则 媒体类型 and(媒体功能的尺寸){

                        css代码

                }

        媒体规则：

                not(排除某些设备) only(只有某些设备) all(所有设备)

                规则一般用的很少(甚至不用)

          ***使用媒体查询一定要注意选择器的权重值 最好每个媒体查询在原本的选择器的下面写***

        

02 rem 和 em 单位的使用

        rem动态单位 是可以随着当前页面的字体大小调整而调整的

         px 是固定单位 对于不同设备来说 用户体验感不好所以我们需要一个能动态切换的单位

        动态单位 : rem 和 em

        em:

                1em=一个父元素字体大小

                例: 父元素font-size:20px   那么子元素1em=20px

                em的缺点:

                        是按照当前父元素的字体大小来确定尺寸的

                        在实例开发中页面的父元素众多 字体大小不尽相同

                        所以不同的父元素 em最终渲染的大小又不同  不方便控制

        rem: (root 根标签)

                1rem=1个html标签的字体大小

        

03 css 预处理语言

        css预处理语言：

                Less Sass

        less可以定义变量

                @变量名：变量值

                        变量值可以是数值+但  数值本身  颜色....只要是原来css的属性值都可以

        less的选择器可以嵌套:

            选择器1{

                选择器2

            }渲染成后代

            选择器1{

                >选择器2

            }渲染成子代

            选择器1{

                &伪类

            }渲染成伪类渲染器

        less还可以进行计算

                加减乘不需要加括号 除法必须加括号

                运算符和数值之间最好空格隔开

        函数：

                .br(@r:5px){

                        -webkit-borer-radius:@r;

                        -moz-borer-radius:@r;

                        -ms-borer-radius:@r;

                        -o-borer-radius:@r;

                        border-radius: @r;

                    }

        混入：

                .box1{

                        width: 100px;

                    }

                    .box2{

                        height: 100px;

                    }

                    .box3{

                        font-size: 100px;

                    }

                    .box4{

                        .box1;

                        .box2;

                        .box3;

                        .br()

                    }

04 布局容器

        首先页面需要引入bootstrap.css文件

        响应式容器(有版心的)

                <div class="container">aaa</div>

        全屏宽的容器:

                <div class="container-fluid">aaa</div>

        引入jquery.js文件

        引入bootstrap.js文件

05 栅格系统

        Bootstrap 的栅格系统是用 flexbox 构建的，页面上最多允许 12 列。

        Bootstrap 5 栅格系统有六个类：

      .col-xs- (超小型设备 - 屏幕宽度小于 576px)

      .col-sm- (小型设备 - 屏幕宽度等于或大于 576px)

      .col-md- (中型设备 - 屏幕宽度等于或大于 768 像素)

      .col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素)

      .col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px)

      .col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 1400px)