WEB响应式网站如何实现？

1.在开发中往往会遇到客户需要网站有响应式效果，那么什么是响应式？什么是自适应呢？他们之间有哪些区别？

响应式网站：指能兼容PC（w>=1080），平板电脑(768<w<1200)，移动端(w<=768)这三种设备的网站，会改变原始布局直到达到对应设备布局效果。

自适应：指能够随窗口大小伸缩而不改变原来布局效果。
2.如何实现？虽然不同人实现方式都有所不同，但我推荐一种个人认为相对较简单又不容易出错的方法。
主要方法：boostrap+flexible.js（该文件链接链接：https://pan.xunlei.com/s/VNAtb2vPvNsY16j91ebKJSfJA1?pwd=ukab#
提取码：ukab
）

boostrap的删栏布局可以很快速的达到页面盒子大小随屏幕大小改变的效果，不过boostrap本身对边距的把控样式类有些局限，所以这会使我们外部盒子大小发生改变，内部的字体或者盒子边距无法精确达到缩放的效果，因此我们还需要结合flexible.js来实时改变根标签html的fon-size大小，这样字体和边距等值就可以使用rem达到伸缩自如，但最后还需使用媒体查询给屏幕设置一个最小值，在达到这个值之后的font-size将保持不变。

响应式网站案例