Flex弹性布局
Flex 布局概念
- 精确灵活控制块级盒子的布局,避免浮动布局中的脱标现象。
- 非常适合结构化布局。
- 父元素添加
display: flex
,子元素可自动地挤压或拉伸。此时父元素称为弹性容器,子元素称为弹性盒子
调节盒子的间距
调节主轴
- justify-content: start 默认值
- justify-content: end
- justify-content: center
- justify-content: space-around
- justify-content: space-evenly
- justify-content: space-between
调节侧轴
- align-items: stretch 默认值,子级无高度时拉伸填满父级
- align-items: flex-start
- align-items: flex-end
- align-items: center
- align-self: 单独设置某个子级对齐方式
伸缩比
- flex: 整数;
移动端布局
网页元素的宽高随设备宽高等比缩放。
解决方案
- rem:目前的解决方案
- vw/vh:未来的解决方案
rem
- 相对单位,1rem = 1HTML字号大小
- 在rem中,HTML字号设为视口宽度的1/10
- 媒体查询:不同窗口设置不同HTML字号
@media(width:375px) { html { font-size: 37.5px; } }
- 手淘开源的 flexible.js 根据不同视口宽度给HTML根节点设置不同 font-size
- 利用预处理器 less 换算 rem 尺寸。
vw/vh
- 相对单位,相对视口尺寸的计算结果
- 1vw = 1/100 viewport width
- 1vh = 1/100 viewport height
响应式布局
检测视口宽,不同宽度响应不同的布局
媒体查询
@media (媒体特性) {
选择器 { 样式 }
}
<link rel="stylesheet" media="(min-width:400px)" href="xx.css">
-
min-width、max-width、width 属性
-
orientation: portrait/landscape
-
视口宽小于768px,认为是手机端,隐藏侧栏
@media (max-width:768px) { .left { display: none;} }
BootStrap
封装好的响应式框架
<link rel="stylesheet" href="./bootstrap-3.4.1-dist /css/bootstrap.css">
栅格系统
BootStrap3默认将网页分成12份
屏幕尺寸 | 栅格类 |
---|---|
> 0px | col-xs-* |
> 768px | col-sm-* |
> 992px | col-md-* |
> 1200px | col-ls-* |
- .container 版心样式,左右有15px的padding。
- .row 有15px的margin,可抵消container类的15px的padding。
- .container-fluid 宽度100%,左右有15px的padding。