先做个手机能看的页面哟。别一上来就想着兼容所有设备，那会把自己绕进去。

打开编辑器，写HTML骨架。head里加一行：``。这行代码告诉手机浏览器，页面宽度按设备实际宽度算，别自作主张缩成一团。很多人漏掉这句，后面怎么调都不对。

布局先用flex。导航栏放一排链接，设`display: flex; flex-wrap: wrap;`。`flex-wrap`是关键，屏幕窄了链接自动换行，不会挤成一条线。别用固定像素宽度，用百分比或者`flex: 1`让元素自己分空间。

图片最容易出问题。给它加`max-width: 100%; height: auto;`。图片永远不会撑破容器，高度跟着比例走。就这么两行，省掉一堆麻烦。

字体也别写死。手机上14号字刚好，电脑上就显得小。用`clamp()`：`font-size: clamp(14px, 2vw, 18px)`。最小值14，最大值18，中间随屏幕宽度浮动。一行搞定，不用写三套媒体查询。

媒体查询还是要用的，但别滥用。断点别按iPhone、iPad型号分，按分。你把浏览器窗口慢慢拉窄，发现哪块布局开始丑了，那就是断点位置。通常两三个断点就够：手机、平板、桌面。

举个例子。桌面端侧边栏在右边，宽度300px。手机端侧边栏得沉到下面去。写个断点：

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


.container { flex-direction: column; }


.sidebar { width: 100%; }


}

就这么直接。flex方向一改，侧边栏自然掉到下面。

写的时候记住一条：先写手机样式，再往上加。这叫移动优先。好处是你从最窄的开始写，后面只做加法，心里踏实。反过来写也行，但容易漏掉手机上的细节。

测试别光在Chrome里拖窗口。打开开发者工具，切到设备模式，选几个常见尺寸过一遍。再看看真机，手机浏览器和模拟器有细微差别，尤其字体渲染和点击区域。

最后呢，别忘了检查按钮和链接的点击区域。手指头比鼠标指针粗，按钮至少44px高。手机上挤在一起的链接，用户点起来想砸手机。

做完这些，你的页面在手机、平板、电脑上都能正常看了。剩下的细节，边用边调，别想着一次做到完美。