忙完一段时间，发布了一版之后，习惯性的放下手头一些需求，去整理之前的项目，看看存在什么问题，是否有可优化的空间。发现我写的页面存在一个很大的问题，那就是多分辨率适配的问题。之前一直用着响应式的理念，根据页面调整布局，但是发现与产品的需求相悖，他们希望看到的是所有分辨率的显示屏显示的效果一致。

要做到我们产品的这种需求，那就只能用 web 2.0 时期的百分比 + float 布局了，也就是我们常说的网页自适应，这种页面布局方式在老版本的网页体现的比较明显，其应用场景一般比较局限于 pc 浏览区。

而响应式布局是互联网新时代的产物，是随着移动端的兴起而发展起来的，这种布局方式，根据屏幕的分辨率不同，给用户呈现不同的视觉效果，更进一步发展为现在常说的 pwa ，渐进式网页布局，多用于屏幕分辨率比较广泛的环境。

说说现在的自适应怎么做，我总结出以下原则：

1、 viewport: content=”width=device-width, initial-scale=1”

2、使相对宽度(vw)或者百分比宽度

3、适当使用相对大小的字体（rem)

4、使用 float 布局

5、使用媒体查询，有选择的加载 CSS

6、图片自适应