响应式的实现总结

响应式的实现总结

实现响应式没有绝对的方法，下面是几个笼统的办法：

1. 通过rem实现响应式布局

rem单位都是相对于根元素html的font-size来决定大小的。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

2. flex弹性盒子布局

3. 媒体查询

• 设置meta标签
  大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）

• 媒体查询

4. 百分比布局

5. vw/vh 视宽单位

这里说下媒体查询，每个媒体查询都会增加维护的成本，应避免滥用，下面是一些避免不必要的媒体查询的建议

• 使用百分比或视口单位取代固定长度。
• 当需要在较大分辨率下得到固定宽度，使用max-width而不是width
• 不要忘记为替换元素(比如Img、video等)设置一个max-width,值为100%
• 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化， background-size: cover 这个属性都可以做到。
• 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定 列的数量。弹性盒布局（即 Flexbox）或者 display: inline-block 加上常规的文本折行行为，都可以实现这一点。
• 在使用多列文本时，指定列宽而不是列数，这样它就可以在较小的屏幕上自动显示为单列布局。

总结

总的来说，实现响应式的思路是尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸。