响应式布局

学习目标

能够说出响应式原理
能够使媒体查询完成响应式导航
能够使用Bootstrap的栅格系统
能够使用bootstrap的响应式工具

1.响应式原理

1.1响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的

1.2响应式布局容器

响应式布局需要一个父级做为布局容器,来配合子级元素实现变化效果

原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化

平时我们的响应式尺寸划分

• 超小屏幕（手机，小于768px):设置完度为100%
• 小屏幕（平板，大于等于768px):设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px):宽度设置为970px
• 大屏幕（大桌面显示器，大于等于1200px):完度设置为1170px

2.Bootstrap框架

官网:bootstrap官网链接

1.优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

2.使用

1. 创建文件夹结构

   

2. 创建html骨架结构

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
 <!--[if lt IE 9]>
 <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]--

4. 引入相关样式

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

4. 书写内容

3.布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstarp预先定义好了这个类，叫.container,它提供了两个作此用处的类。

3.栅格系统

3.1栅格系统简介

3.2栅格选项参数

3.3列嵌套

3.4列偏移

3.5列排序

左边推(push),推几份,右边占几份推几份

右边拉(pull),拉几份,左边占几份拉几份

3.6响应式工具