Z-Blog 主题移动端适配：从 viewport 到断点该设几个

主题做完在电脑上挺好看。拿手机一开，字挤成一团。

这事十有八九不是样式写错，是压根没做移动端。

先确认 viewport 有没有

打开 header.php 找这一行：<meta name="viewport" content="width=device-width, initial-scale=1">。

没有它，手机浏览器会按 980px 左右渲染再缩小。你写的媒体查询全部按 980 起算，等于白写。

这行必须在 head 里，位置越靠前越好。

断点设几个

我一般设两个：768 和 1024。

768 以下按手机算，1024 以下按平板算，再往上就是桌面。

三个档位足够覆盖绝大多数设备。设五六个断点，维护的时候你自己记不住哪个管哪段。

布局怎么降级

桌面两栏，手机一栏。别用 float 硬撑，用 flex，加 flex-wrap: wrap，容器窄了自动换行。

或者更省事，直接 display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，一行搞定，断点都不用写。

三处容易忘

图片。给 img 加 max-width: 100%; height: auto，否则宽图直接把页面撑出横向滚动条。

表格。后台插入的表格不会自适应，加个外层 overflow-x: auto 兜住。

代码块。长短不一的代码行会撑破容器，overflow-x: auto 同样处理。

怎么验

浏览器开发者工具切到手机模式，宽度拖到 375。

页面没有横向滚动条。字能正常读。按钮点得到。

三条都过，才算能用。好看是下一步的事。