响应式布局就是一套代码适应不同的屏幕宽度
媒体查询
能根据设备的宽度变化,设置差异化样式
完整写法
开发常用写法
min-width(从小到大)
max-width(从大到小)
外链式写法
BootStrap框架
BootStrap:快速开发响应式网页
栅格化是指将整个网页的宽度分成若干等份
BootStrap3把网页等分成12等份,每个内容占12等份的份数。
*代表的是份数
Glyph icons字体图标使用
HTML页面引入BootStrap样式文件
空标签调用对应类名
glyphicon
字体图标类名
BootStrap插件实现常见的交互效果
引入BootStrap样式
引入js文件:JQuery.js + BootStrap.min.js
复制结构HTML,并适当调整结构或内容
复制需要组件,并适当调整
当默认样式不满足当前网页的时候,可以去官网定制特定的样式,然后下载,重新引入文件
不会的去官网查找文档
什么样可以做成响应式网站
企业网站,内容很少
电商网站一般分为PC端一个网站,移动端是一个网站
小案例