响应式设计经常被误解，很多人以为就是把页面按比例缩小。那不叫响应式，那叫偷懒。
真正的响应式是什么。是你的页面能根据屏幕尺寸，自动调整布局结构。电脑上三栏的，平板上变两栏，手机上变一栏。不是简单地把三栏压缩成一栏那么窄，而是重新排版，把内容竖着排下来。
为什么这个区别重要。你简单缩小的话，三栏挤在一个手机屏幕上，每一栏都窄得没法看，字小、图片小、按钮小，用户体验极差。而真正的响应式，是把这三个栏的内容依次排下来，每个都占满屏幕宽度，读起来就正常了。
那怎么做。第一，用弹性布局。宽度用百分比或者自适应单位，别写死像素值。第二，用媒体查询。设定几个断点，比如大于 1024 是一套布局，768 到 1024 是一套，小于 768 又是一套。第三，图片要自适应。给图片设最大宽度百分之百，高度自动，这样就不会溢出。第四，字体大小用相对单位，能跟着屏幕变。第五，用移动优先的思路来写样式。先写手机端的样式，再用媒体查询往大屏加东西。这个顺序，比反过来容易控制。
有几个坑要注意。第一，别用固定宽度的容器。你写了个 1200 像素的容器，手机上就横向溢出了。第二，表格在手机上很难处理，考虑改成卡片式的展示。第三，弹窗、浮层这些在手机上要重新考虑位置。第四，横屏和竖屏也要测一下。
响应式做得好不好，有个最简单的判断方法。用手机打开，看要不要横向滚动。要滚动的，就是不响应式。然后看内容排列顺不顺，有没有元素重叠。
这套东西做对了，你就同时解决了移动端体验和移动优先索引两个问题。一笔投入，两处收益。
—— 来自 图趣网 - 优秀网站分类目录 的分享
