响应式

一、媒体查询

开发常用写法媒体特性常用写法

max-width

min-width

1 书写顺序

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

min-width（从小到大）

max-width（从大到小）

需求

默认网页背景色是灰色

屏幕宽度在768-992之间, 网页背景色是粉色

屏幕宽度在992-1200之间, 网页背景色是skyblue

屏幕宽度大于1200, 网页背景色是绿色

2 基本语法

根据设备宽度的变化，设置差异化样式

完整写法

3 关键词

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

and

only

not

4 媒体类型

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

5 媒体特征

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

6 外链式CSS引入

eg：

7 隐藏

使用媒体查询，配合display：none；即可

二、BootStrap

1 UI框架

UI框架概念

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

作用

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

2 BootStrap简介

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

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

3 BootStrap使用步骤

使用步骤

一、下载

下载： https://www.bootcss.com/首页 → BootStrap3中文文档 → 下载BootStrap

二、使用

1.引入： BootStrap提供的CSS代码

2.调用类：使用BootStrap提供的样式container：响应式布局版心类

4 BootStrap栅格系统

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

BootStrap3默认网页分成12等份

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

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

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

注意:

1.container类自带间距15px;

2.row类自带间距-15px

5 全局样式

掌握BootStrap手册用法，使用全局CSS样式美化标签

分类：布局样式 在标签后后加入对应样式的类名或属性值内容美化样式