做网站，先别急着写代码哟。打开电脑，把浏览器窗口拉窄，像手机那么窄。再看你的网站，还好看吗？如果挤成一团，字小得要放大，或者横向出现滚动条，那就是没做好响应式。

响应式说白了就一句话：网站能自己适应屏幕大小。电脑上宽着排，手机上竖着排，不用另做一个手机版网站。

怎么开始？第一步，在网页头部加一行。就一行，告诉浏览器：页面宽度跟着设备走。

html

不加这行，手机上页面会缩成一小块，怎么调都没用。

第二步，别把宽度写死。以前有人喜欢写 `width: 960px`，一写就完蛋，手机屏幕才375像素宽。改成百分比，比如 `width: 100%`。图片也一样，加 `max-width: 100%`，它就不会撑破屏幕。

第三步，用媒体查询。这是响应式的核心工具。逻辑很直白：屏幕窄到一定程度，换一套样式。

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


.nav { display: block; }


.sidebar { display: none; }


}

上面这段意思是：屏幕小于768像素时，导航改成竖排，侧边栏藏起来。768不是圣旨，按你的需要定。

第四步，排版要跟着变。电脑上三栏并排，手机上就一栏叠一栏。用 Flexbox 或 Grid 都行。简单点，给容器加 `display: flex; flex-wrap: wrap;`，子元素设个最小宽度，它自己就会换行。

字体也别忽略。手机上正文别小于16像素，行高给到1.5以上。按钮做大点，手指点得中。按钮和链接之间留够间距，别让人误触。

再说几个容易踩的坑。

第一，别用固定定位做底部工具栏。手机键盘弹出来时，它会挡住输入框。用 `position: sticky` 更稳。

第二，横屏也要看看。手机横过来，高度变矮，别被切掉。

第三，测试别只在浏览器里拉窗口。真机上看，安卓和苹果都试试。电脑上模拟器和真机手感不一样。

还有，响应式不是一次做完的事。你的会变，加个表格、插张图，都可能撑破布局。养成习惯：每次改完，拉窄窗口看一眼。花十秒钟，省一堆麻烦。

记住三个