先看一个数字：你网站一半以上的访客可能用的是手机。如果你的页面在手机上要放大才能看清，那些人三秒内就走了。响应式就是解决这个问题的：一套代码，电脑、平板、手机都能看。

第一步，加一行标签。在网页头部写上``。漏了这句，手机浏览器会假装自己是电脑，把页面缩成一小块，后面全白干。

第二步，别写死宽度。老办法爱用`width: 960px`，屏幕一窄就出横向滚动条。换成百分比或`max-width`。图片也一样，加一句`img { max-width: 100%; }`，让图跟着容器缩。

第三步，用媒体查询。比如：

css
@media (max-width: 768px) {


.nav { display: none; }


.main { padding: 10px; }


}

意思是屏幕窄于768像素时换一套样式。手机上把横向导航藏起来，改成汉堡菜单；多栏布局改成上下堆叠。写的时候从手机开始，先保证小屏能用，再往大屏加东西，这比反过来省事得多。

第四步，字体别太小。手机上正文至少16像素，行高给到1.5左右，手点得准，眼看得清。按钮和链接的点击区域留够，别让人戳半天戳不中。

第五步，测试。电脑上把浏览器窗口拉窄，看排版乱不乱。真机更靠谱，安卓和苹果各找一台试试。重点看三样：有没有横向滚动条，图片会不会溢出，按钮好不好点。

还有几个常踩的坑。表格在手机上容易撑破，外面套一个可横向滑动的容器。视频用`max-width: 100%`管住。写死高度的盒子一多就溢出，改用`min-height`。

最后提醒一句，响应式不是做完就完事。新加的、新换的图片，都要在手机上再看一眼。养成这个习惯，比什么框架都管用。