打开电脑，先别急着写代码。问自己一句：你的网页在手机上看着别扭吗？如果是，那今天这篇就是写给你的。

响应式网站，说白了就是同一个网页，在大屏电脑上铺得开，在小屏手机上挤得下。不用做两套，一套就够。

第一步，加一行代码

打开你的HTML文件，在``里塞进这句：

``

没这行，手机浏览器会假装自己是台大电脑，把页面缩得跟蚂蚁似的。加上它，页面才知道自己多宽。

第二步，把固定宽度扔掉

以前写`width: 960px`，现在改。改成`max-width: 960px; width: 100%;`。容器能撑满就撑满，撑到960就停下。简单说，别把路修死，留点伸缩的余地。

第三步，图片得听话

图片最容易撑破版面。加一条：`img { max-width: 100%; height: auto; }`。图片最大不超过它爹的宽度，高度自己算。大屏小屏都不变形。

第四步，写媒体查询

这是响应式的核心。别怕这个词，就是一句“当屏幕多宽时，怎么变”。

比如：

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


.sidebar { display: none; }


.main { width: 100%; }


}

意思很直白：屏幕窄到768以下，侧边栏藏起来，主占满。手机上谁看侧边栏？该藏就藏。

第五步，别用太多断点

新手容易犯的错：给每个设备写一套。iPhone一个，iPad一个，安卓一个。累不累？

其实两三个断点就够用。768px一个，480px一个。剩下的交给弹性布局去消化。记住，断点是补丁，不是地基。

第六步，用Flexbox偷懒

以前算百分比算到头疼。现在直接给父元素来一句 `display: flex; flex-wrap: wrap;`，子元素给个 `flex: 1 1 300px;`。意思就是：你至少300宽，不够就换行，够了就平分。电脑上三列，手机上一列，一行代码搞定。

最后呢，动手试

写完别光在电脑上看。按F12，打开开发者工具，点那个手机图标，拖宽度。看它在哪个尺寸下崩了，回去改。反复几次，比看十篇教程都管用。

响应式不难，难的是你愿不愿意把那个写死的`px`改成`%`。就现在，打开你的项目，改一行试试。