15、响应式布局

响应式布局，也叫百分比布局

    布局百分比的：
        width
        padding-left
        padding-right
        margin-left
        margin-right
        left
        right

        需要牢记的公式
            宽度：
                目标元素的宽度 / 父级元素的宽度 = 百分比宽度
            高度：（Tips:高度的增加或者减少，需要配合媒体查询）
                height
                padding-top
                padding-bottom
                margin-top
                margin-bottom
                top
                bottom
    图片百分比
        图片的宽度和高度比较弹性化
            图片如果不设置宽度和高度，会显示图片的原始尺寸
            当设置了图片的宽度百分比后，宽度发生变化，高度也会等比缩放
            Tips：图片有时候太大，会超出，最好设置一个上限值，max-width 或者 max-height
    文字百分比
        文字单位：
            em 和 rem
                em：父级文字大小的倍数，父级文字大小会决定子级文字em的大小
                rem：针对的是html文字字体的大小
            一般响应式布局都用rem，通过媒体查询改变html的文字大小，就可以整体改变所有的页面中的文字大小

偷懒的响应式布局
    <meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
    width取值直接与页面定义的宽度一直，目前最佳实践，缺点Android 2.3.5版本以下不支持。