做网站，先别急着写代码。打开你的手机，看看那些让你想摔手机的页面：字小得拿放大镜，按钮点十次错八次，横向滚动条拉不到头。这就是没做响应式的下场。

响应式网站说白了就一句话：同一个网址，电脑上看是宽的，手机上看是窄的，自己会调整，不用你手动缩放。

第一步，加个meta标签

在HTML的head里写这一行：

``

没这行，手机浏览器会假装自己是电脑屏幕，把整个页面缩小塞进去。加了这行，页面宽度就等于手机宽度，一切从这儿开始。

第二步，别写死宽度

新手最爱干的事：给div设个固定宽度，比如960px。电脑上没问题，手机上一打开，右边直接被切掉。

把固定宽度换成百分比或max-width。比如：

`width: 100%; max-width: 960px;`

意思是：最多960px，屏幕小了就跟着缩。

第三步，图片要听话

图片默认会撑破容器。加一句：

`img { max-width: 100%; height: auto; }`

图片最大不超过容器宽度，高度自动算，不会变形。

第四步，媒体查询做断点

这是响应式的核心。简单说就是：屏幕小于某个尺寸时，换一套样式。

`@media (max-width: 768px) { ... }`

里面写手机端的规则。最常见的操作：多列变一列。电脑上三栏并排，手机上竖着排下来。

断点选多少？别纠结。768px管平板和手机，480px管小手机，够用了。先从这两个开始，以后遇到问题再加。

第五步，字体和按钮别抠门

手机屏幕上，正文至少16px，按钮高度至少44px。手指头不是鼠标箭头，点不准。按钮之间留点空隙，别挤成一团。

第六步，用flexbox排布局

以前用float，清浮动清到头疼。现在用flex，一行代码搞定：

`display: flex; flex-wrap: wrap;`

`flex-wrap: wrap`的意思是：装不下就换行。电脑上一排放三个，手机上一排放一个，自动的。

测试，别偷懒

写完别只在电脑上缩窗口看。真机测试：安卓一台，苹果一台，平板一台。Chrome开发者工具里的设备模拟能用，但真机上的触摸手感、字体渲染不一样，骗不了人。

最后一点说个实在话：响应式不是做完就完事。用户拿什么设备看你的网站，你控制不了。你能做的就是把基础打牢——别写死宽度，图片别超框，手机上能点准。这三条做到了，页面至少不会被人骂。

剩下的，边做边调。