先看一个数：超过一半的访客用手机打开你的网站。要是网页在手机上字小得看不清、按钮点不着，人扭头就走。响应式网站就是解决这个的——同一套代码，屏幕大就宽着排，屏幕小就竖着排。

第一步，加一行meta。在网页头部写上：

``

这行代码告诉手机浏览器：按手机自己的宽度来渲染，别自作主张缩小。忘了这行，后面全白搭。

第二步，别写死宽度。很多人习惯给盒子设`width: 960px`，手机屏幕才375像素，直接撑出横向滚动条。换成百分比或者`max-width`。图片也一样，加一句`img { max-width: 100%; height: auto; }`，图片就跟着容器缩，不会溢出。

第三步，用媒体查询分档。核心就一句：屏幕窄了换套排版。

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


.nav { flex-direction: column; }


.sidebar { display: none; }


}

768像素大概是平板竖屏的宽度。大于它就横排，小于它就竖着摞。档位别设太多，两三档够用了。

第四步，布局用flex或grid。老式的float布局写响应式很痛苦。flex让元素自动换行，`flex-wrap: wrap`一加，挤不下就掉到下一行。grid更适合做卡片列表，`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`这一句，卡片会自己决定一行放几个。

第五步，字体和点击区域。手机上正文别小于16像素，不然浏览器会自动放大，排版就乱了。按钮和链接的点击区域至少44×44像素，手指没那么精准。间距留够，别让人误点。

第六步，真机测试。浏览器开发者工具里的手机模拟只是参考。拿真手机打开看看，横屏竖屏都转一下。重点看三处：有没有横向滚动条、按钮好不好点、文字会不会挤成一团。

还有提醒一句：响应式不是做完就完事。新加功能时顺手在窄屏下看一眼，比事后返工省事得多。