做网站最怕什么？电脑上看着挺漂亮，一掏手机，字叠在一起，图片撑出屏幕，按钮点不着啊。这就是没做响应式。

响应式说白了就一句话：同一个网页，自动适应不同大小的屏幕。不用给手机单独做个站，一套代码全搞定。

第一步，先写个meta标签

在head里加上``。不加这行，手机浏览器会把页面当成电脑版缩着显示，字小得拿放大镜看。这行代码告诉浏览器：按设备实际宽度来，别自作主张。

第二步，别把宽度写死

新手最容易犯的错：`width: 960px`。电脑上没问题，手机屏幕才375像素宽，直接溢出。改成百分比或者`max-width`。比如`max-width: 960px; width: 100%;`，大屏不超960，小屏自动缩。

图片也一样。加一句`img { max-width: 100%; height: auto; }`，图片就不会撑破容器。

第三步，用媒体查询换布局

这是响应式的核心。简单理解：屏幕窄到一定程度，换一套样式。

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


.sidebar { display: none; }


.main { width: 100%; }


}

屏幕小于768像素时，侧边栏藏起来，主占满。手机上少点东西不丢人，挤成一团才难受。

第四步，字体和按钮别太小

手机上正文至少16像素。按钮的点击区域至少44×44像素，手指头没那么精准。别用10像素的字考验用户视力。

第五步，导航栏要变形

电脑上横排的菜单，手机上横排肯定放不下。常见做法是缩成一个汉堡按钮，点开再显示。纯CSS也能做，用checkbox加label切换，不写JS也行。

第六步，测试，别猜

浏览器开发者工具里有设备模拟，挨个尺寸拉一遍。但模拟归模拟，真机上手点一点更靠谱。至少拿一台安卓一台苹果看看。

有个坑提醒一下：别用`position: fixed`做底部工具栏，手机键盘弹出来的时候容易挡住输入框。非要用，记得处理好键盘弹出时的布局变化。

还有，表格在手机上很难看。要么让表格横向滚动，外面包一层`overflow-x: auto`，要么干脆在窄屏时把表格改成卡片式排列。选一个，别放着不管。

响应式不是做完就完事。新加、改样式，都可能在某個尺寸下翻车。养成习惯：改完页面，随手拉一下浏览器宽度，看看有没有崩。

就这些。没有高深技术，关键是别偷懒，每个尺寸都照顾到。用户不会因为你电脑端做得漂亮就原谅手机上的糟糕体验。反过来，手机上顺滑，人家才愿意多待一会儿。