十年前做网站，你得做两套。一套给电脑看，一套给手机看。两套代码，两个后台，改个电话号码要改八个地方。烦。

现在不用了。响应式网站，说白了就是一套代码，自己会变形。电脑上显示三栏，手机上自动叠成一栏。图片会缩，字会换行，导航会收进那个三条杠的按钮里。

怎么做到的？核心就三样东西。

第一，别写死宽度。以前喜欢写“width: 960px”，现在改成“max-width: 960px”。多出来的空间让它自己分。第二，用百分比或者flex布局。别算像素，算比例。第三，加个viewport标签。就一行代码，告诉手机“别把网页缩成芝麻大”。

听着简单，做起来容易踩坑。最常见的是图片。你设了最大宽度100%，图片确实不撑破屏幕了，但加载的还是原图。手机用户流量白花花的。解决办法是用srcset，给不同屏幕准备不同尺寸的图。浏览器自己挑。

另一个坑是字体。别用固定像素。用rem，根元素字号随屏幕变。手机上14px，电脑上16px，读着都舒服。

还有导航栏。电脑上一排链接，手机上塞不下。要么变成汉堡菜单，要么横向滚动。我推荐汉堡菜单，点一下滑出来，不占地方。

表格最麻烦。手机屏幕窄，五列的表格挤成一条线。要么改成卡片式，每行数据竖着排。要么让表格能横向滑动。别硬缩，缩完谁都看不清。

有人说响应式网站加载慢。那是没做好。该合并的CSS合并，该压缩的图片压缩。别上来就加载三套字体图标库。手机上用不着的，电脑上再加载。

测试的时候别只看自己手机。找个旧安卓，找个小平板。实在没有，浏览器开发者工具里调。从320px宽开始试，那是iPhone SE的尺寸。如果320px下不出乱子，基本就稳了。

响应式不是万能药。有些后台管理系统，非要响应式就是找罪受。操作按钮密密麻麻，手机上点不准。那种情况，单独做个手机版更实在。但普通企业站、博客、电商展示页，响应式是最省心的方案。

成本也低。不用维护两个域名，不用同步数据。改一个地方，所有设备都更新。SEO也友好，不用搞什么移动适配标注。

最后呢说个实在的。别追求完美。手机用户不会拿你的网站跟APP比。他们只求能看、能点、能联系你。把主要排清楚，电话能直接拨，地址能一键导航。做到这三样，比什么花哨效果都强。

做网站跟装修一样。先保证水电通，再考虑挂什么画。响应式就是那个水电改造，看不见，但住进去才知道多重要。