一、准备工作
1.1 技术选型
-
方案：响应式布局页面开发方案
-
技术：bootstrap框架
-
设计图：本设计图采用1280px 设计尺寸
1.2 需求分析
-
① 屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为col-md-就可以了，md是大于等于970以上的
-
② 屏幕缩放发现小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局
-
③屏幕缩放发现超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改变布局
-
④策略:我们先布局md以上的pc端布局，最后根据实际需求在修改小屏幕和超小屏幕的特殊
二、开始制作
2.1 container容器宽度修改
-
因为设计图宽度是1280px而bootstrap最大的只有1170px
2.2 主体结构搭建
-
需要消除container自带的内边距，消除方法是可以在里面添加一个row
-
在row里面构建header，main，aside分别占12份的2，7，3
（1）header
-
logo区域
-
col与h1的使用会使元素有边距的问题，需要一一清除，注意权重问题
-
为了让图片响应式，要设置宽度width100%
-
-
nav区域
-
使用nav > a来制作导航栏
-
（2）main
-
news区域
-
使用list0unstyled clearfix可以快速添加语义类样式
-
-
publish区域
-
结构：div > h3 + p * 3
-
灵活使用bootstrap所自带的样式比如字号大小，颜色所对应的class
-
（3）aside
-
结构: (a > img) + (a > button + h4 + p)
2.3 header区域响应式制作
-
header会因为屏幕缩小而把导航栏弄在同一行显示
-
小到一定程度让一个span代替logo的图片显示
三、总结
-
bootstrap的img-responsive实质上是设置max-width： 100%；
-