前端小知识（4）--自适应和响应式

自适应和响应式

1.概念

响应式和自适应都是为了优化页面在不同终端设备上的浏览体验，而采用的是两套解决方案。

响应式

响应式通过修改在不同尺寸下的页面布局来实现（一般基于一套代码）

举个🌰：segmentfault

移动端

PC端

大屏

中屏：

中小屏：

小屏：

可以看出，PC端尺寸缩小到一定程度后和移动端的布局一样。

自适应

自适应通过将页面上的元素的尺寸设置为百分比，以及设置最小宽度来实现（一般会分别提供移动端、PC端的两套代码，有时会有Pad端）

再举个🌰：

移动端

PC端

当PC端缩放到一定程度时，横向尺寸不变，即设置了横向的最小宽度。显然，PC端和移动端是两套前端代码。

笔者在自己的实际项目中基本上都是采用的自适应的解决方案，原因：1.响应式对于设计的要求更高 2.响应式实际编码难度会更大，而且在页面布局较为复杂的情况下，采用响应式对于前端开发而言绝对是一场灾难。3.从用户体验上考虑，通过修改页面布局，虽然设计美观上是有所提升，但是会导致页面信息的缺失，不利于用户操作。

个人感觉，对于一些纯粹的信息展示的页面，采用响应式有一定的优势，例如博客等。而对于一些需要用户参与交互的页面，采用自适应+PC/移动分离的方式更加合适。