做网站，先别急着写代码啦。你拿手机打开自己的页面看看——字是不是小得要用放大镜？图片是不是撑出屏幕？按钮点半天没反应？这就是没做响应式。

响应式说白了，就是同一套代码，屏幕大就多显示，屏幕小就挤一挤。不搞两套网站，省事。

第一步，先把这行塞进head里：

html

没这行，手机浏览器会假装自己是电脑，把页面缩小，啥都白搭。

第二步，忘掉固定宽度。别写`width: 800px`，改成`width: 100%`或`max-width`。盒子能缩能伸，才不会横着滚。

第三步，图片加一条`img { max-width: 100%; height: auto; }`。图片跟着容器走，永远不会戳出去。

第四步，布局用flex或grid，别用float那套老古董。flex一行放不下会自动换行，小屏幕上顺顺当当堆起来。导航栏在电脑上横着排，手机上变成汉堡按钮，靠的就是媒体查询。

媒体查询其实就一句话：屏幕小于多少，就换一套样式。

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


.nav { display: none; }


.hamburger { display: block; }


}

断点别设太多。手机一个、平板一个、桌面一个，够了。追着各种机型设断点，纯属给自己找罪受。

第五步，字体和点击区域。手机上正文别小于16px，按钮别小于44px见方，手指头没那么准。字太小、按钮太密，用户点一次骂一次。

第六步，测试。别只在Chrome里缩窗口。真机拿起来看，安卓、苹果各试一台。开发者工具里的设备模拟只是参考，真机上的毛病模拟器看不出来。

最后说个坑：别用`px`写死一切。能用`rem`、`%`、`vh/vw`的地方就用。写死了，换个屏就崩。

响应式不难，核心就三件事：让宽度灵活、让布局会折、让手指点得着。写完拿手机刷一遍，顺眼就成。