同一个网站，在电脑上和在手机上打开，看到的往往不是简单的放大缩小，而是不同的排布方式。让一套页面适配不同尺寸屏幕的做法，称为响应式设计。
三项基础技术
弹性布局
页面上元素的宽度不再写死为固定值，而是按比例计算。窗口变窄或变宽时，元素随之按比例伸缩，不会出现横向滚动，也不会留下大片空白。
条件样式
同一份页面，可以根据屏幕宽度、高度、分辨率等条件应用不同的样式规则。窄屏时把横向排列的栏目改为纵向堆叠，就是最典型的用法。这让适配不需要另做一套页面，而是在同一套结构上调整呈现方式。
自适应的媒体
图片和视频等元素需要能够随容器调整自身大小，避免超出屏幕范围。通常的做法是限定其宽度不超过所在区域的宽度，需要时再配合不同尺寸的图片资源。
这样做的收益
- 一套内容、一个地址。不同设备访问的是同一个页面，不存在内容不一致的问题，维护成本也更低。
- 阅读和操作更顺畅。手机上不需要反复放大缩小，按钮和表单也更容易点击和填写。
- 结构统一。页面地址不因设备而改变，搜索引擎抓取和收录时不会出现内容重复。
验收时可以检查什么
响应式做得是否到位，不需要懂技术也能大致判断。可以在手机上打开网站，依次看几点：文字是否需要放大才能看清；按钮和链接是否容易点中；表格或长列表是否被截断；图片加载是否正常；导航菜单是否可用。
需要留意的是，“在手机上能打开”和“按手机的方式重新安排”是两回事。前者可能只是把电脑页面缩小显示，后者才真正考虑了小屏下的阅读顺序和操作习惯。