做网站先别急着写代码。打开浏览器，把窗口慢慢拉窄。如果挤成一团、字小得看不清、还得左右滑，这站就不合格。响应式要的就是：手机、平板、电脑，打开都顺眼。

第一步，在网页头部加一行viewport。不加这行，手机浏览器会假装自己是台大电脑，把整个页面缩小塞给你，字全成蚂蚁。加完，手机才按真实屏幕宽度排版。

第二步，别写死宽度。把固定像素换成百分比或max-width。图片加一句max-width:100%，它就会自己缩，不会撑破屏幕。

第三步，媒体查询。这是响应式的骨架。简单说就是：屏幕窄于某个值，换一套样式。比如小于768像素时，导航从横排改竖排，多栏叠成一栏。写三四个断点够用，别贪多。

第四步，用flex或grid排布局。老式浮动布局一窄就乱，这俩天生会换行、会伸缩。卡片列表用grid，设成自动适应列数，屏幕多宽它就排几列，省事。

第五步，字体和点击区域。手机上看，正文别小于16像素。按钮和链接留够手指点的空间，至少44像素高。挨太近，用户老点错。

最后一点，拿真手机试。电脑上拉窗口只是模拟，真机的字体渲染、触摸手感都不一样。安卓、苹果各看一遍，横屏竖屏都翻翻。

顺序别搞反：先做手机版，再往上加宽。手机优先逼你砍掉多余装饰，信息反而清楚。电脑版只是锦上添花。

还有个笨办法很管用：每写完一块，就把窗口拉到最窄看一眼。发现问题当场改，别等全做完再返工。响应式不是最后一点加的补丁，是从第一行代码就带着的习惯。