先说结论：别一上来就写代码。打开你的浏览器，把窗口慢慢拉窄。如果你的网站开始出现横向滚动条，文字挤成一团，按钮点不着——这就是你要解决的问题。

响应式网站就一个目标：同一个页面，在手机、平板、电脑上都能正常看、正常点。不需要做三个版本，也不需要判断用户用什么设备。一套代码，自适应搞定。

第一步，加一行meta标签。放在head里：

``

这行代码告诉手机浏览器：别自作主张把页面缩小，按设备实际宽度来。没有它，后面全白搭。

第二步，丢掉固定宽度。`width: 960px`这种写法，在手机上必然溢出。改成百分比或者max-width。比如：

css
.container {


max-width: 1100px;


width: 100%;


margin: 0 auto;


}

意思是：最多1100像素，但屏幕窄了就跟着缩。图片也一样，加一句`img { max-width: 100%; height: auto; }`，别让图片撑破布局。

第三步，用媒体查询处理布局切换。核心思路是：窄屏竖着排，宽屏横着排。比如两栏布局：

css
.sidebar {


width: 100%;


}


@media (min-width: 768px) {


.main { float: left; width: 70%; }


.sidebar { float: right; width: 28%; }


}

768像素是个常用分界点，往下当手机，往上当平板和电脑。分界点不是死的，看你什么时候开始难看就设在哪。

第四步，处理导航栏。这是最容易翻车的地方。电脑上横排的菜单，手机上根本塞不下。常见做法：手机上变成一个汉堡按钮，点开才显示菜单。或者干脆让菜单项竖着堆叠。简单点就先竖排，别急着上JavaScript。

第五步，字号和点击区域。手机上别用12px的小字，正文至少16px。按钮和链接的点击区域别小于44×44像素，手指没那么精准。表格和长单词也容易溢出，给表格加个横向滚动容器，长单词加`word-break: break-all`。

第六步，测试。别只在你自己的手机上试。用浏览器开发者工具的设备模拟，把常见尺寸过一遍：320、375、414、768、1024、1440。重点看三件事：有没有横向滚动条，文字有没有被截断，按钮能不能点。

末了说说个容易忽略的点：别追求像素级完美。响应式网站的核心是可用，不是每个尺寸都长得一模一样。布局在中间尺寸稍微别扭一点，只要不影响阅读和操作，可以先放过。先把大问题解决，细节后面慢慢调。

做响应式不难，难的是忍住不做三个版本。一套代码，从窄到宽都测试一遍，比什么都强。