不管用户用多大的屏幕打开，页面都该是体面的，自适应说到底是一套页面适配所有屏幕，动手前先定好断点网格和单位三件设定

这两种尴尬的根源是一样的：页面只按一种屏幕的尺寸在"摆位置"，换个屏幕，摆放全乱。自适应做的就是把这件事提前解决：同一套页面，把"哪里并排、哪里堆叠、哪里收进菜单"写成跟着屏幕变动的规则，电脑上铺开、平板上收拢、手机上排成一列，内容不丢、按钮好点、阅读顺畅，不需要为每种设备各做一个站。

这篇讲 AI 制作自适应网站的完整流程：先讲清自适应和"单独做手机站"的区别，再讲动手前的断点、网格、单位三件设定，再讲怎么让 AI 生成会收拢的弹性结构，再到图片与组件的适配处理、一台电脑测三种屏幕的检查方法、上线后新内容不破版的维护，收尾落在适配标准变成系统默认配置。看完之后，你手上的站能在任何屏幕上都拿得出手。

一、自适应是什么：一套页面，所有屏幕

多端适配有三条路：电脑站和手机站分开做，各做各的，效果可控但内容要维护两份，改一处两边都得动，久了必然不同步；只做一个手机站，电脑用户看到的是一条窄条加大片空白，白白浪费大屏幕；自适应，一套页面按屏幕自带规则收放，维护只有一份，是投入产出最平衡的做法。这里说的自适应，就是第三条。

自适应的关键认识是：它不是把页面"等比缩小"，而是让布局"重新排"。同样一个三列的服务列表，在电脑上并排三个，在平板上两列加下一行，在手机上竖直排成一串，每个卡片的大小始终舒服、文字始终看得清。三种屏幕下的样子大致是这样：

把这个"收拢"的思路交给 AI，多数适配改造就不需要从零写代码：把现有页面的结构描述清楚，告诉它每个区块在窄屏该怎么变，它就能给出对应的弹性布局写法。前提是先立好三件设定，下一节讲。对已经上线的站来说，改成自适应也不必推倒重来：从受影响最大的页面开始，先把并排模块在窄屏的收拢规则补上，再处理图片和表单，一页一页顺过去，站不会因为改造而停摆。

二、动手前的三件设定：断点、网格、单位

自适应不是做个大概就行，它有一套明确的设定。三件设定定好，页面在不同屏幕上的"收拢动作"就有据可依，和 AI 沟通也有共同语言。

断点，是布局换姿势的分界线。屏幕宽度跨过某条线，布局就从一种排列切到另一种。断点不要多，三个就够用：手机一条、平板一条、桌面一条。设得太多，每种宽度都像独一份，改一处崩三处；三个断点配上统一的收拢规则，维护起来清爽，AI 也好执行。

网格，是内容排队的方式。一整行放几列内容，随屏幕变：桌面四列，平板两列，手机一列。列与列之间的间距统一成一个值，屏幕再宽再窄，间距不动、列数自动调整。有了网格，新增的卡片、案例、图文块都有明确的"站位"，不用每放一个元素就重新量尺寸。

单位，是防破版的底线。字号、间距这些尺寸尽量用相对单位，让它们跟着屏幕整体缩放；页面主体设一个最大宽度，屏幕再大内容也不会拉成无边一条；坚决不用的做法，是给区块写死高度，内容一多就裁字、一少就留大洞。三条设定合起来，就是这张多端对照表：

三件设定不用逼自己一次定完美：数值可以先按这套常用的来，上线后哪里别扭再微调。要紧的是"有设定"这件事本身，有设定，后面所有页面才有一致的收拢规律。

三、让 AI 生成弹性结构：先讲主次，再讲收法

让 AI 做自适应布局，最容易的沟通方式不是报代码，而是报"收拢动作"。把页面区块列出来，逐个说明它在窄屏该怎么变，说法就四句：并排的变上下，侧边的沉到底部，多列的变单列，导航的收进菜单。把这四句连同三件设定一起交给 AI，让它按这个规则生成整页的弹性结构，产出会比泛泛的"帮我适配手机端"精准得多。

几个高频模块有成熟的适配规则，沟通时可以直接点名：顶部导航在手机端收成一个菜单按钮，点开再展示栏目，别让七八个栏目横着硬挤；价格表或参数表在窄屏改为卡片式，一列数据一张卡，比留半张表让人左右拖强；图文混排在手机上从"左图右文"改为一上一下，图片始终满宽显示；并排按钮在手机上竖直排列，主按钮在上、占满整行。

AI 生成的结构要边出边验：把浏览器窗口从宽拖到窄，逐档看布局有没有按设定切换：并排的是否变上下、导航是否收进菜单、有没有谁不听话地溢出。发现不对的地方，指认清楚再让它调："价格表在窄屏还是一整张，改成每个套餐一张卡片。"逐处调上几轮，比大段描述重出快得多。结构这一关过了，才算真正过了自适应的一半。

四、图片与组件的适配：别让小屏幕装大件

布局收拢之后，翻车的多半是素材和组件。图片最容易出状况的三种情况：原图太大把版面撑破，解决办法是让图片始终不超过它所在容器，容器多宽图就多宽，高度按比例自动跟；首屏横幅图在手机上把上半屏全占了，电脑上看着正好的横幅，到窄屏应该把高度压下来、焦点留在画面中间；同一张图在两种屏幕上被勉强缩放，清晰的画质被拉糊，理想做法是生成时就准备大小两版，屏幕宽窄各用各的。

组件方面，手指和鼠标的操作差异要照顾到。手机上的按钮、链接、表单格，可点区域要留足，两个能点的东西之间隔开一些，避免"想点这个点成了那个"；输入框在手机上聚焦时别被弹起的键盘挡住，输入框本身要足够高，填起来不费劲；弹窗在窄屏不要撑破屏幕，长内容让它内部滚动、按钮固定在底部；带手势的组件（轮播、抽屉）在手机上用手指滑是习惯动作，配上左右滑的响应才算合格。

文字这一块，规则只有一条：允许它换行，别拦着它。给标题写死高度、给卡片内的文字写死宽度，都是裁字破版的元凶；标题在窄屏多占两行，恰恰是它该有的样子。字号可以随屏幕整体缩放，但正文的最小字号要守住，手机上细到看不清的正文，等于把内容藏起来了。

五、多端检查：一台电脑查三种屏幕

检查的方式比想象的省事：在电脑上打开页面，把浏览器窗口从宽到窄缓慢拖动，布局应该在三档之间平稳切换，切换处不闪不乱；再用浏览器的开发者工具切到手机模拟视图，可以指定宽度逐项查看。要注意的是模拟视图毕竟不是真机，触摸行为、真实字号观感、键盘弹起这些只有真机才准，关键页面（首页、转化页、表单页）至少用真手机各过一遍。

多端翻车的症状翻来覆去就那几种，对照下表能快速定位原因，改法也大多是一两处样式的事：

检查不用一次查全站，定个简单的优先级：首页、栏目页、常见的详情页、带表单的页面，这四类各挑代表性的几页过一遍，覆盖了站里绝大多数布局模式；改完一处，拖窗口回看这一处有没有牵连别处，确认后再查下一处。

六、上线后的适配维护：新内容别破版

自适应最怕的不是一次没调好，而是修好之后又被新内容破掉。新页面、新素材进来的时候带着三个常见风险：新页面没沿用适配规则，别人都收拢它不收，全站就它出洋相；新素材尺寸失控，一张超宽的广告长图、一张没压过的原图，能把整页宽度顶穿；新模块临时拼装，没经过三档查看就上线，窄屏必乱。对应的预防也简单：新页面从现有模板派生，素材入站先按规范压尺寸，新模块上线前照常拖窗口过一遍三档。

访客的反馈是适配问题的第一信息源，要让他们反馈得动。页面上留一个方便的反馈入口，收到问题时引导对方说清三件事：用什么设备、在哪个页面、出现什么现象。有这三样，多数问题不需要复现就能定位；有条件的话请对方附一张截图，比十句描述都管用。每修一个问题，顺手看下同类页面有没有同样的毛病，一次修掉一批。还有一个习惯值得养成：每次改版或上新活动页之后，隔两天用手机再走一遍关键路径。新页面刚上线时未必暴露问题，等真流量进来、真键盘弹出，问题才露头；提前用真机走一遍，比等访客反馈快得多。

七、规模化：让适配成为默认配置

单个站的时候，适配靠自觉还能维持：做页面的想着拖窗口看一眼，新图上来记得压一压。站一多、更新一勤，自觉就会松：有的页面三个断点齐整，有的页面干脆没设；有的站图片收着尺寸，有的站三天两头破版；出了问题，还得先猜是哪个环节漏的。适配要想稳，不能靠人记得住，得靠系统默认就带。

UC 站群系统的做法是把适配规则沉到系统层：自适应模板统一维护，断点与网格的预设写在模板里，新页面从模板派生出来的那一刻就带着全套适配，不存在"忘了设"的情况；图片按位置自动按尺寸处理，超宽超大的素材在入库环节就被规范住；多个站点共用同一套适配标准，检查一处经验能覆盖全站群，改一版规则批量生效。适配从"每页都要操心的事"变成"系统本来就管的事"，人力才腾得出来做内容。

回到开头那句话：不管访客用什么屏幕打开，页面都该是体面的。这份体面不靠昂贵设备、不靠重做多个站，靠的是断点、网格、单位三件设定，靠"并排变上下、侧边沉底部"的收拢规则，靠对图片和组件的日常把关，也靠修好之后不再被新内容打破的维护习惯。做完这些，屏幕大小就只是访客的自由，不再是你站点的软肋。