响应式布局开发

一、响应式开发

1.1 响应式开发原理

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

设备划分	小区间
超小屏幕（手机）	< 768 像素
小屏设备（平板）	>= 768px ~ < 992px
半屏幕（屏幕显示器）	>= 992px ~ < 1200px
宽屏设置（大桌面显示器）	>= 1200 像素

1.2 响应式布局组件

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

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

【平时我们的响应式规模化】

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

但是我们也可以根据自己的情况定义划分。

 二、Bootstrap前端开发框架

2.1 Bootstrap简介

Bootstrap 来自 Twitter（推特），是现在用网的前端框架。

Bootstrap 是基于 HTML、CSS 和 JavaScript 的，它简单快捷，Web 开发更快捷。

• 中文官网：Bootstrap中文网http://www.bootcss.com/
• 官网：