先看一个数：超过一半的流量来自手机。你的网站如果在手机上排版错乱，用户三秒就关。

响应式不难，难的是别把它想复杂。下面直接开干。

第一步：加一行meta

打开HTML文件，head里塞这句：

``

没有它，手机浏览器会把页面缩成缩略图，字小得拿放大镜看。这行等于告诉手机：按我的屏幕宽度来。

第二步：别写死宽度

新手最爱写 `width: 960px`。手机屏幕才375px，直接溢出。改用百分比或`max-width`：

css
.container {


width: 100%;


max-width: 1200px;


margin: 0 auto;


}

意思是大屏最多1200，小屏自动缩。图片同理，加一句`img { max-width: 100%; height: auto; }`，图片就不会撑破容器。

第三步：用媒体查询换布局

媒体查询就是“当屏幕小于多少时，换个样式”。手机上一栏，平板上两栏，电脑上三栏：

css
/ 默认手机：单栏 /


.card { width: 100%; }


/ 平板 /


@media (min-width: 768px) {


.card { width: 50%; }


}


/ 电脑 /


@media (min-width: 1024px) {


.card { width: 33.3%; }


}

手机优先写起，往上加。别反过来，维护起来想死。

第四步：Flexbox救场

导航栏在电脑上一横排，手机上挤成一坨。用Flexbox，加个换行：

css
.nav {


display: flex;


flex-wrap: wrap;


}

屏幕窄了自动折行，不用你算宽度。按钮、卡片排列全靠它。

第五步：字体和点击区域别抠门

手机上看字费劲。正文至少16px。链接和按钮的点击区高度别低于44px，手指没那么精准。间距拉开点，别让用户误触。

第六步：真机测试

Chrome开发者工具按F12，点左上角手机图标，能切换各种机型。但这只是模拟。真机跑一遍，横屏竖屏都转转，才知道有没有坑。

末了说一句

响应式不是加个框架就完事。核心就三件事：别写死宽度、用媒体查询调布局、手机上保证能点能看。做到这三点，你的站已经比大多数强了。