做网站先别急着写代码。打开浏览器，把窗口慢慢拉窄。如果挤成一团、字小得看不清，这站就不合格。响应式就一句话：屏幕大就多显示，屏幕小就少显示，别让用户左右拖动。

第一步，在HTML里加一行：``。漏了这行，手机上所有东西都会缩成邮票大小。加完再测。

第二步，别写死宽度。`width: 600px`是死胡同，宽屏留白、窄屏溢出。换成`max-width: 600px`加`width: 100%`，图片记得设`max-width: 100%; height: auto`，不然大图会把手机屏幕撑破。

第三步，用媒体查询。简单说就是设条件：屏幕窄于768px时，换一套样式。比如三栏变一栏：

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


.column { width: 100%; }


}

从小屏开始写更省事。先按手机宽度排版，再逐步加宽加大屏样式，这叫移动优先。反过来写，经常要回头拆样式。

第四步，布局用flex或grid，别用float。float本来不是干这个的，清除浮动那套老办法可以扔了。flex一行代码就能换向，比手算百分比稳。

第五步，字体别用固定px。正文用`1rem`，跟着用户设置走。屏幕小的时候适当缩行高和字号，但别低于14px，看着累。

第六步，导航栏在手机上别硬塞。桌面横排，手机收起成菜单按钮。汉堡图标加个点击展开，几十行JS就够，不用上框架。

第七步，留白用手指量。按钮和链接的点击区域至少44×44像素，手指粗，点不中会骂人。

最后一点，真机测试。浏览器开发者工具的设备模拟只是参考，拿真手机横竖各看一遍。重点看三处：图片有没有溢出，文字有没有被截断，按钮好不好点。

响应式不是加个媒体查询就完事。它是从写第一行CSS起就想着：这行在手机上会怎样？养成这习惯，比背一百条技巧管用。