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

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

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

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

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

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

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

4、使用 float 布局

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

6、图片自适应