前言：我们看到传统网站，在手机端打开显示相对电脑端来说只是缩小比例了，体验效果差；但是有些新型网站，在电脑端打开和在手机端打开，显示内容基本上是一致的并且不是缩小比例，是兼容性好，这是怎样做到的呢？基本上有两种方式实现，用自适应网站或者响应式网站，那么它们有什么区别？
1. 自适应网站。
自适应网站是使用不同设备浏览同一个网页的时候，网页内容及版式风格相似或完全相同，电脑端和移动端使用同一套代码结构，不需要每个终端设备都写一套代码，可以节省人工、开发、时间成本，更符合搜索引擎规则。
例子：产品的排列方式并没有因为终端屏幕的大小而发生变化。
代码中实现：
在网页代码的头部，加入一行viewport标签
网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。当然可以用width:auto;
这方案带来的最大好处就是在后续维护和更新网站的时候，绝大部分网站内容都只需要更新一次，大大降低人工维护成本，但是技术要求比较高，要考虑适应电脑、手机端、ipad端等。
响应式图片width:xx%
2. 响应式网站。
响应式网站是使用不同设备浏览同一个网页时，可以实现电脑端看到的网页效果和移动端看到的网页效果完全不同，可采用多套代码结构，代码工作量大。
例子：电脑端、平板端的产品分为四列展示，但手机端的则是两列，在保证描述清晰的前提下进行细微的页面布局调整，这就是响应式与自适应最大的区别。
代码中实现：@media screen and(max-width:768px){ body{...} }
这方案可以针对不同的终端设备做不同的适配效果，同时这样会增加网站维护的成本。
响应式图片，根据屏幕的不同大小，加载不同分辨率的图片
3. 自适应网站和响应式网站相同点。
字体也不能使用绝对大小（比如px），而只能使用相对大小（比如em,现在也很多使用rem了，也就是所谓的高清方案）。
都是为了更好的兼容不同终端设备，解决在不同大小和分辨率的设备上正确显示网页的问题，使用户有非常好的用户体验。
总结：没有绝对地说使用哪种方式最好，通常来说，根据需求结合界面设计展示进行选择，经验得出两种方式合理混用最佳。
