响应式开发

响应式开发

• 1.1 响应式开发原理
• • 1.2 响应式布局容器
  • 1.3 Bootstrap前端框架
  • 1.4 Bootstrap 使用
  • 布局容器
  • 栅格系统
  • 栅格系统列嵌套
  • 列偏移
  • 列排序
  • 响应式工具

1.1 响应式开发原理

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

1.2 响应式布局容器

1. 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
2. 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式
3. 平时我们相应式尺寸划分
   

1.3 Bootstrap前端框架

目前最流行最受欢迎的前端框架，Bootstrap是基于HTML,CSS,JAVASCRIPT的。
中文官网：https://www.bootcss.com/
一、优点：
1、标准化的html+css编码规范
2、提供一套简洁，直观，强悍的组件
3、有自己的生态圈，不断的更新迭代
4、让开发更简单，提高了开发效率
二、2.x.x:停止维护，兼容性好，代码不够简洁，功能不够完善。
4.x.x：目前还不是很流行，最小版本
3.x.x:目前使用最多，稳定，但是放弃了IE6-IE7，对IE8支持单是界面效果不好、偏向用于开发响应式布局、移动设备优先的WEB项目。

1.4 Bootstrap 使用

布局容器

栅格系统

栅格系统列嵌套

列偏移

列排序

响应式工具

在不同的尺寸下显示或隐藏