做网站，先别急着写代码罢了。打开电脑，把浏览器窗口从最大拖到最小，看看你想做的页面会不会乱。如果乱了，说明你需要响应式设计。

响应式说白了就一句话：同一个网页，在不同大小的屏幕上都能正常显示。手机竖着看、平板横着看、电脑大屏看，不挤、不重叠、不用来回左右拖。

第一步，加一行代码。在HTML的head里放这个：

``

这行告诉手机浏览器：别自作主张缩放，按设备实际宽度来。漏了它，后面全白干。

第二步，别用固定像素。宽度写成100%，别写960px。图片加一句`max-width: 100%; height: auto;`，它就会跟着容器缩，不会撑破屏幕。字体也一样，用rem或百分比，用户调大字号时页面不崩。

第三步，靠媒体查询做断点。不用记太多，三个够用：手机默认样式，768px以上改平板布局，1024px以上改桌面布局。写法很简单：

@media (min-width: 768px) {
.box { width: 50%; }


}

意思就是屏幕宽过768px时，这个盒子占一半。断点值不是死的，看你什么时候开始难看，就在那儿切。

第四步，布局用flex或grid。以前用float，现在没必要。一行flex就能让几个卡片自动换行：

.container { display: flex; flex-wrap: wrap; }
.card { flex: 1 1 300px; }

每个卡片最少300px宽，放不下就换行。手机上自然变成一列，电脑上排成一行。

第五步，测试。别只在浏览器里拖窗口。用手机真机打开看，或者浏览器开发者工具里的设备模拟。重点看三处：导航菜单在小屏上能不能点、表格会不会溢出、长单词会不会撑破容器。溢出就加`overflow-x: auto`或者`word-break: break-word`。

最后提醒一句：响应式不是把桌面版硬塞进手机。小屏上该藏的藏，该简的简。导航收进汉堡菜单，侧栏挪到下面。用户用手机是来办事的，不是来缩小看全景图的。

动手做一遍，比看十篇教程管用。找个简单页面，从加viewport那行开始，一步步改，半小时你就能看出变化。