前端基础知识学习---响应式布局

#博学谷IT学习技术支持#

一、媒体查询：

目标：能够根据设备宽度的变化，设置差异化样式

1.基本语法：

开发常用写法

Ø 媒体特性常用写法

Ø max-width

Ø min-width

2.书写顺序：

min-width（从小到大）

max-width（从大到小）

3.关键词：

and

only

not

4.媒体类型：

    媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

5.媒体特征：

    媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

二、BootStrap

1.UI框架：

UI框架概念：

Ø 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。

作用：

Ø 基于框架开发，效率高，稳定性高。

2.BootStrap

   BootStrap是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

   中文官网: https://www.bootcss.com/

   使用步骤：

1. 下载： https://www.bootcss.com/

首页 → BootStrap3中文文档 → 下载BootStrap

2.使用：

    引入： BootStrap提供的CSS代码

     <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

    调用类：使用BootStrap提供的样式

     container：响应式布局版心类

三、BootStrap栅格系统

  栅格化是指将整个网页的宽度分成若干等份

  BootStrap3默认将网页分成12等份

 .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

 .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

 分别使用.row类名和 .col类名定义栅格布局的行和列。

  注意:

   1. container类自带间距15px;

   2. row类自带间距-15px