做网站，先别急着写代码罢了。打开你电脑上的浏览器，把窗口慢慢拉窄，再拉宽。看看你常逛的网站，是不是跟着变？这就是响应式。一句话：一套代码，屏幕大小通吃。

以前的做法是给手机单独做个站。费事，还容易两边对不上。现在不用了。

第一步，加一行标签

在网页头部里塞进这句：

``

没这行，手机浏览器会把页面当成电脑版硬塞进小屏幕，字小得拿放大镜看。加上它，页面就知道自己该多宽。

第二步，别写死宽度

新手最容易犯的错：`width: 600px`。电脑上好看，手机上一半跑出屏幕外。改成百分比，或者用 `max-width`。图片也一样，给它 `max-width: 100%`，让它自己缩。

第三步，媒体查询

这是响应式的核心。说白了就是“如果屏幕宽度小于某个值，就换一套样式”。

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


.sidebar { display: none; }


.main { width: 100%; }


}

上面这段意思是：屏幕窄于768像素时，侧边栏藏起来，主占满整行。768这个数不是死的，看你设计需要。一般手机竖屏按375到414算，平板按768左右算。

第四步，用弹性布局

别再用 float 在那算来算去了。flex 一行搞定：

css
.container { display: flex; flex-wrap: wrap; }


.item { flex: 1 1 300px; }

`flex-wrap: wrap` 是关键。空间不够，子元素自动换行。`flex: 1 1 300px` 意思是：最少300像素宽，有空间就伸展，没空间就缩。三列变两列变一列，浏览器自己算，你省心。

第五步，字体和按钮别太小

手机上手指头粗。按钮至少44像素高，字至少16像素。不然点半天点不中，用户直接关页面走人。

第六步，真机测试

电脑上拉窗口只是看一眼。真章在手机上。做完拿自己手机打开，横着竖着都试试。你会发现电脑上没问题的间距，手机上挤成一团。改就是了。

末了说说个实在的：别追求完美适配所有设备。主流手机和平板覆盖到，够了。剩下的老设备，能看就行。

响应式不神秘。标签加对，宽度别写死，媒体查询兜底，flex 收尾。半小时能上手。