day 5 响应式布局
-
一份代码相应不同终端
响应原理
各个档位下的版心 container
市场约定档位划分:
- w<768 超小屏幕(xs : extra small)(手机,学习rem布局里面的档位划分都是在这个范围)
- 768<= w <992 小屏设备(sm : small)(平板)
- 992<= w <1200 中等屏幕(md: medium)(桌面显示器)
- 1200<=w 大宽屏设备(lg: large)(大桌面显示器)
//不同档位下版心 //超小屏xs @media screen and (min-width:0px) { .container { width:100%; } } //sm小屏 @media screen and (min-width:768px) { .container { width:750px; } } //小PC --md @media screen and (min-width:992px) { .container { width:970px; } } //大PC lg @media screen and (min-width:1200px) { .container { width:1170px; } }
如果使用了上面某个档位的类名,按照顺序生效;
bootstrap 框架
1.重点:栅格系统;响应式工具
2.bootstrap项目不需要引入normolize.css
-
栅格系统:
- 12份 一份8.33333…%
-
列嵌套
-
盒子有左右15px 的padding值,row:往外走设置15px;表现出来相当于把父亲的15px的padding抵消了,实际是自己向外拉伸了
-
.row {
margin-left:-15px;
margin-right:-15px;}
row要包子元素
-
-
列偏移:左右布局 或 居中布局;
<!-- 列偏移 --> <!-- 居中 --> <div class="col-lg-6 col-lg-offset-3 son">这是个6份</div> <!-- 两边相同的宽度 --> <div class="col-lg-4 son">4</div> <div class="col-lg-4 col-lg-offset-4 son">4</div>
-
响应式工具(类名):
- BS预制类名,可以控制元素在各个档位下的显示或隐藏
- hidden-md 只在md档位隐藏(封闭式档位)
- 代码选择,传统布局,flex有PC端兼容问题
-
UI出图,多张图,一把情况下四张图,可能5张;一张图补充一个新档位;
- 看ui给的图,从哪个图往后布局都是一样的(占有份数是一样的),那么这个图就是选择列分配的入口的图;
- 只要小于992px,md档位下的类名就不生效了
- min-width起始值;max-width;终止值