响应式布局

响应式布局

一.媒体查询

1.基本语法

媒体特性常用写法
max-width
min-width

@media(媒体特性){
	选择器{
		样式
	}
}

2.书写顺序

css具有层叠性，所以有重叠的部分会显示最下面的内容。
min-width：从小到大
max-width：从大到小
具体可自己画数轴参考

3.link写法

外链式css引入

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">

二.BootStrap

1.简介

bootstrap是由twitter公司开发维护的前端ui框架，它提供了大量编写好的css样式，允许开发者结合一定html结构及js，快速编写功能完善的网页及常见交互效果

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

2.下载

去官网下载，下载3版本的用于生产环境的bootstrap

3.使用

1.引入：bootstrap提供的css代码

<link rel="stylesheet" href="./路径/css/bootstrap.css">引入bootstrap.min.css也可以，做项目推荐引入min，压缩过，体积小，加载速度快

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

4.栅格系统

栅格系统是指将整个网页的宽度分成若干等份
bootstrap3默认将网页分成12等份

屏幕类型	响应断点	别名	容器宽度	类前缀	列数	列间隙
超小屏幕	<768px	xs	100%	col-xs-*	12	30px
小屏幕	>=768px	sm	750px	col-sm-*	12	30px
中等屏幕	>=992px	md	970px	col-md-*	12	30px
大屏幕	>=1200px	lg	1170px	col-lg-*	12	30px

5.其他类名

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

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

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

注意：
1.container类自带间距15px
2.row类自带间距-15px

6.Glyphicons字体图标

使用步骤：
1.html页面引入bootstrap样式文件
2.空标签调用对应类名
glyphicon
图标类

8.插件

bootstrap提供的常见效果，包含了html结构，css样式与js

使用步骤：
1.引入bootstrap样式
2.引入js文件：jQuery.js+BootStrap.min.js