先看一个数：超过一半的访客用手机打开你的网站。如果页面在手机上要放大缩小才能看，人早跑了。

响应式网站说白了就一句话：同一个页面，屏幕大就多摆点东西，屏幕小就收起来。不用做两套站，不用跳转到m.xxx。

第一步，先把这行加进head：

html

不加这行，手机浏览器会假装自己是电脑，把整页缩小塞进屏幕。这是新手最常见的坑。

第二步，别写死宽度。`width: 960px`这种写法在手机上直接溢出。改成百分比或者`max-width`：

css
.container { max-width: 1200px; width: 100%; margin: 0 auto; }

图片也一样，加一句`img { max-width: 100%; height: auto; }`，图片就不会撑破容器。

第三步，用媒体查询。这是响应式的核心，语法很简单：

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


.sidebar { display: none; }


.nav { flex-direction: column; }


}

意思是：屏幕宽度小于768像素时，侧边栏藏起来，导航改成竖排。断点不用设太多，手机、平板、桌面三个就够。设多了维护起来头疼。

第四步，布局用Flexbox或Grid。以前用float加clearfix，现在没必要。Flexbox处理一行内部的排列很顺手，Grid适合整页分区。两行CSS能干完的活，别写二十行。

第五步，字体和按钮要够大。手机上正文至少16px，按钮高度44px以上。手指点不准，这是体验问题，不是审美问题。

最后，拿真机测。浏览器开发者工具有设备模拟，但模拟不等于真机。手指滑动、键盘弹出、横竖屏切换，这些只有真手机才暴露问题。测完再把字体、间距微调一遍。

整套流程下来，一个普通企业站或者博客，一两天能搞定。不需要框架，不需要构建工具，HTML加CSS足够。框架是给复杂项目用的，简单页面硬上框架，反而给自己找麻烦。

记住顺序：先写桌面版，再缩小窗口看哪里崩，崩哪补哪。别一开始就想着适配所有设备，那样写不下去。