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版本以下不支持。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容