《响应式Web设计：HTML5和CSS3实战(第2版)》03章 - 学习笔记

响应式Web设计:HTML5和CSS3实战(第2版)

第三章 弹性布局与响应式图片

3.1 将固定像素转换为弹性比例

3.1.1 Flexbox

• CSS Flexible Box Layout

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 版本

• 最新的是2014版

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的定位效果

• 假设页面长度不够，仍然要让页脚停留在视口底部

    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 属性

• 通过逗号分隔图片描述，让浏览器自动选择

• 有缺陷：
  • 1440px宽度的1x屏幕，与480宽度的3x屏幕取得的图片一样

3.4.2 srcset 与 sizes 属性配合

• 需求：某个图片需要在小屏幕上全屏显示，大屏幕上只显示一半宽度

• w：
  • w值并不是真实大小，只是对浏览器的一个提示，大致等于图片的“css像素”大小

3.4.3 picture元素

• 新元素