做网站，先别急着写代码。拿张纸，画三个框：手机、平板、电脑。想想用户在这三个框里分别会怎么用你的站。手机上大概率是单手划，电脑上可能开着多窗口。想清楚这个，后面省一半事。

第一步，加一行meta标签。打开HTML文件，在head里塞进去：``。这行代码告诉浏览器：别自作主张缩放，按设备实际宽度来。漏了它，手机上打开就是缩小版电脑网页，手指点不准。

第二步，别写死宽度。以前流行`width: 960px`，现在扔掉。用百分比或者`max-width`。比如容器写`max-width: 1200px; width: 90%;`。意思是：最宽1200，但屏幕窄的时候自动缩到90%。图片也一样，加一句`img { max-width: 100%; height: auto; }`，图片就不会撑破手机屏。

第三步，媒体查询。这是响应式的核心开关。在CSS文件末尾写：

@media (max-width: 768px) {
/ 手机样式 /


}

768像素是个常用分界线，平板和手机大致在这附近分开。里面的样式专门管小屏。比如电脑上导航横着排，手机上就改成竖排或者折叠成汉堡菜单。别贪多，两三个断点足够。断点越多，维护越累。

第四步，字体和按钮要够大。手机上正文至少16px，按钮点击区域至少44×44像素。手指不是鼠标，点偏了用户就烦。行高给到1.5左右，密密的字看着累。

第五步，测试。别信自己的电脑。打开浏览器开发者工具，按F12，点那个手机图标，随便选个iPhone或者安卓机型，拖宽度看效果。再拿真手机连同一个WiFi，输入电脑IP地址直接看。真机比模拟器靠谱。

还有说个坑：别用固定定位做底部导航栏，手机键盘弹出来时会挡住输入框。用`position: sticky`或者干脆放文档流里。

响应式不是啥高科技，就是让同一个网页在不同屏幕上都别难看。按上面五步走，一个能用的响应式站就出来了。先跑通，再抠细节。