响应式布局—阿里佰秀
响应式开发原理
使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的
设备划分 | 尺寸区间 | 设置宽度 | 列前缀 |
---|---|---|---|
超小屏幕(手机) | <768px | 100% | .col-xs- |
小屏设备(平板) | >=768px ~ < 992px | 750px | .col-sm- |
中等屏幕(桌面) | >=992px ~ < 1200px | 970px | .col-md- |
宽屏设备(大桌面) | >=1200px | 1170px | .col-lg-3 |
- 响应式需要一个父级作为布局容器,来配合自己元素来实现变化效果,原理就是在不同的屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排布方式和大小,从而实现在不同页面看到不同的页面布局和样式变化
@media screen and (max-width:767px) {//小屏设备下的布局为100%
.container {
width: 100%;
}
}
@media screen and (min-width:768px) {//中屏设备下的
.container {
width: 750px;
}
}
Bootstarp框架
简介
前端开发框架—基于HTML、CSS、JS的,简洁灵活,使得WEB开发更加快捷
-
框架:一套架构,完整网页功能解决方案,有预制样式库,组件和插件
-
优点:标准化的编码规范,提供了一套简介直观强悍的组件,不断更新迭代,提高了开发效率
-
四部曲:1、创建文件夹结构2、html骨架3、引入相关文件样式4、书写内容
-
是通过类名直接进行使用,如果要增加自己样式,就是用style直接进行适当修改
container-fluid类流式布局容器,百分百宽度,单独做移动开发
布局容器
需要为页面内容和栅格系统包裹一个.container容器,提供了两类
-
container类
- 响应式容器固定宽度
- 大中小屏设置固定数值px
-
container-fluid类
- 流式布局容器,百分百宽度
- 占据全部视口容器,使用制作移动端页面开发
- 一直保持和父级容器宽度一样
栅格系统
-
将页面布局划分为等宽的列,通过列数的定义来模块化页面布局,系统统一划分12列
-
现有行再有列,列的具体划分需要加入列前缀,.col-lg-3(12份中每一列占几等份)
- 列份数相加应该等于12.列刚好等于12则占满整个container,如果不够则会有空白,如果列份数相加超过了12,多余的那一列会另起一行显示
- 也可以给同时加“class= col-lg-3 col-md-4”
-
在每一列都有左右15px的padding值,原理是给了33.3%宽度距离进行了左浮动,如果直接给这个+margin边框就会存在溢出掉下来,我们就要在列中再增加一个盒子然后设置它的padding
-
列嵌套问题
- 直接在列中放入两个盒子就存在不能顶格显示的问题
- 如果我们给列之前再加一个行row的盒子就可以取消父元素的padding,而且高度会自觉和父高度一样
-
列偏移问题
-
为了实现里面内容可以左右分别分布,将右边盒子进行右偏移,就可以把空白部分的内容放在中间显示出来
-
col-md-offset-4来实现右侧偏移,左盒子加了margin值
-
-
列排序问题
- col-lg-push-8 右边盒子推过来 col-lg-pull-4 左边盒子拉过来
-
列隐藏显示问题
- hidden-xs/sm/md/lg 不同情况下可以进行内容的隐藏
- visible-xs/sm/md/lg 不同情况下进行内容的显示
实例练习
屏幕划分
- 中屏幕和大屏幕布局是一致的,只需要采用col-md就可以了,是大于等于970以上的
- 缩小发现小屏幕的样式发生了改变,设置为col-sm
- 超小屏幕下的样式也发生了改变,所以需要设置为col-xs
container宽度修改
- 修改单独在css文件中进行样式!important
布局
- 在需要变化不同样式的地方进行col-sm/xs属性class的添加来实现不同情况下的显示