1. 响应式开发原理
- 就是使用
媒体查询
针对不同宽度
的设备进行布局和样式设置,从而达到适配不同设备的目的
2. 响应式布局容器
- 响应式需要一个父级作为
布局容器
,来配合自己元素实现变化效果 - 原理就是在不同宽度的屏幕下,通过
媒体查询
来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,
从而实现不同屏幕下,看到不同页面布局和样式变化 - 常见的响应式尺寸划分
超小屏幕
(手机,小于768px):设置宽度为100%
小屏幕(
平板,大于等于768px):设置宽度为750px
中等屏幕
(桌面显示器,大于等于992px):宽度设置为970px
大屏幕
(大桌面显示器,大于等于1200px):宽度设置为1170px
3. Bootstrap前端开发框架
3.1 Bootstrap简介
Bootstrap
来自Twitter(推特)
,是目前最受欢迎的前端框架。Bootstrap
是基于HTML
、CSS
和JavaScript
的,它简洁
灵活,使Web
开发更加快捷
中文官网:http://www.bootcss.com/
官网:http://getbootstrap.com/
推荐使用:http://bootstrap.css88.com/Bootstrap
的优点:
a.
标准化的html + css编码规范
b.
提供一套简洁、直观、强悍的组件
c.
有自己的生态圈,不断的更新迭代
d.
让开发更简单,提高了开发的效率Bootstrap
版本:
a.2.x.x
停止维护,兼容性好,代码不够简洁,功能不够完善
b.3.x.x
目前使用最多,稳定,但是放弃了IE6-IE7。对IE8支持但界面效果不好,偏向于开发响应式布局、
移动设备优先的W额本项目
c.4.x.x
最新版,目前还不是很流行
3.2 Bootstrap的使用
- 控制权在框架本身,使用者要按照框架所所规定的某种规范进行开发
Bootstrap
使用四步曲:
a.
创建文件夹结构
b.
创建html骨架结构
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>