做网站，先别急着写代码呗。打开你的手机，看看那些字小得眯眼、按钮点不着的页面。这就是没做响应式的下场。响应式没那么玄乎，一句话：同一个网站，屏幕大就宽着排，屏幕小就挤着排。

第一步，给页面加一行代码。在head里写上viewport那串，告诉手机别自作主张缩放。不加这行，后面全白搭。

第二步，别写死宽度。用百分比，用flex。比如两栏布局，左边写flex:1，右边写flex:2，屏幕一变自动分。别再用width:960px这种老古董写法。

第三步，图片要听话。img标签加max-width:100%，高度auto。大图在手机上撑破页面，这招就管用。要是图片太多，考虑用srcset给不同屏幕喂不同尺寸，省流量。

第四步，媒体查询。这是响应式的主开关。@media (max-width:768px) { ... }，里面的样式只在手机屏生效。把导航栏从横排改竖排，把三列改一列，都写在这里面。断点别设太多，768和480两个够用了。

第五步，字体也得跟着变。手机上16px正文就够，电脑上可以18px。用rem代替px，改一个根字号，全站跟着缩放，省事。

第六步，按钮要够大。手指头比鼠标粗，点按区域至少44像素高。小按钮在手机上就是反人类设计。

第七步，测。别光在电脑上拉窗口模拟。真机拿起来看，安卓苹果都试试。横屏竖屏转一转，看看有没有错位。

最后说个常见坑：表格。响应式表格要么横向滚动，要么在小屏上改成卡片式。别让表格把页面撑出横向滚动条，那体验最差。

写完这些，你的网站基本能看了。记住，响应式不是加个插件就完事，是从写第一行CSS就想着手机。做完拿给爸妈用手机点一遍，他们不骂人，就算过关。