响应式Web设计:HTML5和CSS3实战(第2版)
第三章 弹性布局与响应式图片
3.1 将固定像素转换为弹性比例
3.1.1 Flexbox
3.1.2 行内快与空白（inline-block）
- 缺陷：元素间会渲染出空白
- 解决：font-size:0;
- 其他缺点：
- 在行内快中，不容易让元素垂直居中
- 做不到让两个相邻元素一个宽度固定，另一个填充剩余空间
3.1.3 浮动
- 缺点
- 给浮动元素的宽度设置百分比，那么最终计算值在不同平台上结果不一样（有的向上取整，有的向下取整）
- 通常都要清除浮动，才能避免父元素折叠
3.1.4 表格和单元
- display: table/table-cell 只是模仿table标签，并不会真正影响html结构
- 限制：
- 需要在每一个项目外面包一层（表元需要被包在一个表格元素中）
- 也不能把设置display: table-cell的元素包在多行上。
3.2 Flexbox 综合能力
- 方便垂直居中内容
- 改变元素的视觉次序
- 在盒子里自动插入空白以及对齐元素，自动对齐元素间的空白
3.2.1 版本
3.2.2 浏览器支持
- IE9以下不支持
- 要获得兼容性，需要加前缀（AutoPrefixer）
3.3 Flexbox 使用
3.3.1 完美垂直居中文本
- align-items( verticle-align ) & justify-content( text-align ) 结合
.middle{
display: flex;
justify-content: center;
align-items: center;
}
3.3.2 左右自适应布局
- 导航栏
- 左侧多个item（.list-item）
- 右侧一个item（.last-item）
.list-item{
margin-right: 10px;
}
.last-item{
// 最重要的地方
margin-left: auto;
}
3.3.3 垂直排列
- 使用'flex-direction'属性
- 若想垂直反序：
- flex-direction: column-reverse;
3.3.4 其他有用的特性
- 对齐
- align-self 将某一个元素按照不同于其他兄弟元素的方式对齐
- 空白分配
- justify-content: space-around/ space-between
- 空间分配
- flex: 1 1 100px;
- flex-grow 有空余空间时，允许元素伸展的份数
- flex-shrink 空间不足时，允许元素缩小的份数
- flex-basis 基准——是否存在自由空间，长度都是100px（可以理解为min-width）
3.3.5 类似fixed的定位效果
<body>
<div class="ct"></div>
<div class="ft"></div>
</body>
html, body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
min-height: 100%;
}
.ct{
// flex属性可以让内容在空间允许的情况下伸展
// 内容区会尽可能占据所有有效空间
flex: 1;
}
.ft{
// 无
}
3.3.6 改变原始次序
- order: -1;
- -1 表示：不修改html元素的情况下，此元素的渲染结果为位于其他元素之前
- 可以和@media配合，达到不同设备上布局不同
3.4 响应式图片
3.4.1 srcset 属性
<img src="a_small.jpg" srcset="a_medium.jpg 1.5x, a_large.jpg 2x" alt="a">
- 有缺陷：
- 1440px宽度的1x屏幕，与480宽度的3x屏幕取得的图片一样
3.4.2 srcset 与 sizes 属性配合
- 需求：某个图片需要在小屏幕上全屏显示，大屏幕上只显示一半宽度
<img srcset="a_small.jpg 450w, a_medium.jpg 900w" sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="a_small.jpg" alt="a">
- w：
- w值并不是真实大小，只是对浏览器的一个提示，大致等于图片的“css像素”大小
3.4.3 picture元素
