做网站，先别想花哨的。第一步，手机打开你的页面，看看能不能看清楚字、点得动按钮。看不清，点不到，后面全白搭。

响应式不是高科技。说白了，就是让网页自己适应屏幕，手机窄就竖着排，电脑宽就横着摆。别给手机用户单独做个m站，两套代码维护起来能累死人。

开始动手前，加一行代码给浏览器看：``。少了这行，手机浏览器会把页面假装成980像素宽再缩小，字小得像蚂蚁。

布局别用固定宽度。`width: 960px`这种写法迟早出事。换成百分比或者`max-width`。图片也一样，加`max-width: 100%`，不然大图能把手机屏幕撑破。

媒体查询是核心工具。写法很简单：`@media (max-width: 768px) { ... }`，意思是屏幕窄于768像素时，用括号里的样式。断点不用太多，两三个足够：手机、平板、桌面。别学那些列七八个断点的教程，维护的时候找都找不到。

导航栏是重灾区。电脑上横排的菜单，手机上挤成一团。简单做法：小屏幕下把菜单改成竖排，或者藏进一个按钮里。别搞复杂的动画，用户点得开就行。

字体别太小。手机上看12px的字等于受罪，正文至少16px。行高给到1.5以上，不然密得像电报。

测试别只靠浏览器缩小窗口。窗口缩小和真手机差别很大，触摸区域、字体渲染都不一样。真机打开看，或者用浏览器开发者工具里的设备模式，至少心里有数。

表格和长代码块在手机上容易溢出。给它们套个容器，加`overflow-x: auto`，让用户横向滑动，别硬挤。

末了说记住：响应式网站不是做出来好看就行，是让每个屏幕上的用户都能用。做完拿给家里老人用手机点一遍，能顺利操作，才算过关。