处理响应式网站布局的笔记

单位 rem和em的区别：

rem是相对于根级html，根元素默认的font-size基本都是16px

em是相对于父级元素计算的，rem很不方便，所有建议用rem计算就行了！用rem是一种进步

 

那默认的文字大小是16px，但我们想设置成12px大小的文字怎么办？

12÷16=0.75（rem）

为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级

 

布局容器：

• container 类用于固定宽度并支持响应式布局的容器
• container-fluid 类用于100%宽度，占据全部视口（viewport）的容器（Bootstrap默认不加这个width类的时候也是占100%宽度）

 

实现响应式布局的三个要素：

• viewport视口设置（设置meta标签就可以）
• @media媒体查询
• 不要把尺寸写死：多用百分比宽度来确定布局尺寸（如，用rem  em来确定布局尺寸）

 

响应式图片：

• 大图随容器缩放，保持宽高比
• max-width: 100%;

#wrap img{
    max-width:100%;
    height:auto;
}