先看一个真事儿啦。上周帮朋友改他小店官网，电脑上挺正常，手机上打开，导航栏挤成一团，图片撑出屏幕，得用手指头左右扒拉。他说当初花了八千找人做的。这钱花得冤。

响应式没那么玄。一句话：一套代码，屏幕大就横着排，屏幕小就竖着排。

第一步，先把那行meta写上

新建HTML文件，head里加这句：

``

不加这行，手机浏览器会假装自己是980像素宽的电脑屏幕，然后把页面缩小塞进去。字小得跟蚂蚁似的。加了，它才老老实实按手机真实宽度来。

第二步，别写死像素

新手最爱写`width: 300px`。电脑上没问题，手机上直接溢出。换成百分比或者`max-width`。图片加一句`img { max-width: 100%; height: auto; }`，它就不会撑破容器了。

第三步，媒体查询，就记一个断点先

别一上来研究七八个断点。先管好一个：768px。

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


.nav { flex-direction: column; }


.sidebar { display: none; }


}

意思是：屏幕窄于768时，导航竖着排，侧边栏藏起来。就这么简单。写完拉窄浏览器窗口，看着元素一个个变样，比看十篇教程都管用。

第四步，用Flexbox，别用float

十年前用float排版，清浮动清到怀疑人生。现在直接给父元素`display: flex`，子元素自动横排。想换行加`flex-wrap: wrap`。想控制比例用`flex: 1`。手机上一改方向，全齐活。

第五步，字体也得跟着变

在电脑上36px正好，手机上就太大了。用`clamp()`：

`font-size: clamp(24px, 5vw, 36px);`

意思是：最小24，最大36，中间跟着屏幕宽度走。一行搞定。

第六步，真机测，别只拖窗口

浏览器拉窄不等于手机。手指点的区域够不够大？横屏会不会乱？iOS的地址栏会不会挡住底部按钮？拿自己手机打开看，有问题就调。这一步省不得。

最后说个坑。有人以为响应式就是加几个媒体查询完事，结果图片没处理、表格没处理、弹窗在手机上跑出屏幕。响应式是个整体思路：先保证不溢出，再谈好看。

从今天开始，新建项目先把viewport写上，布局用flex，图片设max-width。半小时能搞定的事，别拖成八千块的教训。