先看一个事实：超过一半的访客是用手机打开你的网站。如果你的页面在手机上要放大才能看清字，按钮小得点不中，人家三秒就关了。响应式网站建设，说白了就是让同一个页面在电脑、平板、手机上都能正常看、正常用。

第一步，加meta标签。在HTML的head里写这一行：``。没它，手机浏览器会假装自己是电脑，把页面缩成一小块。这是很多新手最先踩的坑。

第二步，放弃固定宽度。别写`width: 960px`这种死数字。主体容器用`max-width`配百分比，比如`max-width: 1200px; width: 100%;`。页面就能跟着屏幕伸缩。

第三步，图片要弹性。给图片加`max-width: 100%; height: auto;`。这样大图不会撑破手机屏幕，也不会变形。背景图用`background-size: cover`，省事又好看。

第四步，媒体查询是核心。简单说就是“屏幕小于多少时，换一套样式”。最常用的断点：768px管平板，480px管手机。写法：

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


.nav { display: none; }


.main { width: 100%; }


}

窄屏下把横向导航藏起来，换成汉堡菜单。多栏布局改成单栏，一列往下排。字号稍微调小一点。

第五步，用相对单位。字号用rem，间距用em或%。这样用户调大系统字体，你的页面不会崩。

第六步，触屏优先。按钮和链接至少44像素高，手指才点得准。鼠标悬停才出现的，手机上根本触发不了，重要信息别藏在hover里。

第七步，手机上做减法。PC端能放三栏，手机就放一栏。表格太宽就允许横向滚动：外面套一个`overflow-x: auto`的容器。

末了说，真机测试。浏览器开发者工具能模拟手机，但不如拿自己的手机实际点一遍。重点看三件事：字能不能看清，按钮能不能点中，页面要不要左右拖。

响应式没那么玄乎。记住一句话：布局用百分比，图片用max-width，窄屏用媒体查询改结构。照着做，你的网站在谁的屏幕上都不丢人。