先看一个数字：超过一半的网站流量来自手机。你的网站如果在手机上排版错乱、字小得看不清、按钮点不中，用户三秒就走。响应式就是解决这个问题的——同一套代码，屏幕大就多显示几栏，屏幕小就自动堆成一列。

先说最省事的办法：别自己写。WordPress、Webflow这类工具自带响应式主题，选个模板，换图换字就能上线。适合没代码基础的人。想自己动手，往下看。

第一步，加一行代码。在HTML的head里写：

html

没这行，手机浏览器会假装自己是电脑屏幕，把页面缩小显示，结果就是一片蚂蚁字。这行代码告诉浏览器：按设备真实宽度来。

第二步，用百分比和弹性单位，别写死像素。`width: 960px`是死板写法，手机屏才375px宽，直接溢出。改成`width: 100%`、`max-width: 960px`，意思是最多960，屏幕小了就自适应。字体也别写`font-size: 16px`，用`font-size: 1rem`，方便统一调整。

第三步，图片要听话。给图片加：

css
img {


max-width: 100%;


height: auto;


}

这样图片不会撑破容器，也不会被拉变形。

第四步，媒体查询。这是响应式的核心工具。写法：

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


.container { flex-direction: column; }


}

意思是屏幕宽度小于768px时，横向排列的栏目改成竖向堆叠。手机竖屏基本在这个范围内。平板可以设1024px断点，按需加。断点不要太多，两三个够用，越少越好维护。

第五步，导航菜单单独处理。电脑上横向一排链接，手机宽度放不下。常见做法是藏起来，换成一个汉堡按钮，点击展开。要么用CSS的checkbox技巧纯CSS实现，要么写几行JS切换class。别把桌面导航硬压缩到手机上，点不中。

第六步，测试。别只在自己的大显示器上看。打开浏览器开发者工具，按F12，点设备图标，切到iPhone、安卓各种尺寸试。再用真手机打开看看。重点看：文字会不会太小、按钮间距够不够手指点、有没有横向滚动条。出现横向滚动条，说明某个元素超宽了，多半是图片或固定宽度的容器。

最后一点两个提醒。一是触屏没有hover，别把关键功能藏在鼠标悬停里。二是表单输入框在手机上要有足够高度，别让人点半天点不准。

响应式不难，核心就一句：布局用弹性单位，宽度到临界点就换排列方式。写完多在几种屏幕上戳一戳，问题都能看出来。