不知道你有没有这样的经历：手机上打开一个网站，字小得要放大才能看清，图片超出屏幕，按钮点半天点不中。十有八九，这网站是多年前只按电脑屏幕做的。现在移动流量占了大头，一个网站好不好，得先看它在手机上的表现。
响应式的核心：一套代码适配所有屏幕
响应式设计说穿了，就是让页面根据屏幕宽度自己变形：手机上内容单列排列，平板双列，电脑上展示更多列。实现靠两样东西——流式布局和媒体查询。布局像水一样，容器多宽它就怎么流；媒体查询则在特定的宽度节点上切换样式，比如：
@media (max-width: 768px) {
.sidebar { display: none; }
}这段代码的意思是屏幕小于 768px 时隐藏侧边栏，手机上的阅读区域一下子就清爽了。
做移动适配最容易踩的坑
- 图片没限制最大宽度，小屏幕上横向溢出
- 字号写死成像素，手机上看起来特别小
- 弹窗和轮播图没做适配，挡住正文还关不掉
- 点击区域太小，手指根本点不中
好在现在主流的 WordPress 主题都自带响应式，多数人不用写一行代码。要做的是上线前用真机把所有页面过一遍，别只在电脑上缩小浏览器窗口就完事，真机上的体验才是用户真实的感受。