多设备屏幕适配演示：从设备档位切换看栅格布局变化

很多人第一次看到“多设备适配”这个词时，会自然地想到窗口尺寸监听、横竖屏变化、折叠状态识别，以及根据屏幕宽度自动切换布局。但眼前这个页面做的事情更聚焦：它把手表、手机、折叠屏和平板放在同一个选择面板中，用户点击不同的设备名称，页面随之替换当前设备标签、尺寸说明、布局提示，并调整下方入口卡片的列数。

因此，这个页面更适合被理解为一个“设备档位与栅格布局演示”。它用固定的设备名称和固定的尺寸文字模拟不同设备场景，再用一个选择值驱动界面变化。页面没有读取真实窗口宽度，也没有调用系统接口判断当前终端到底是手表、手机、折叠屏还是平板；它的价值在于把适配讨论中最容易混在一起的几件事拆开：设备名称是展示数据，尺寸字符串是展示数据，网格列数是条件布局，选中效果是状态反馈。

先看清页面展示了什么

页面打开后，最上方是一行标题区域。左侧有两行文字，第一行是“多设备屏幕适配”，字号较大并使用粗体；第二行写着“vp / fp / 响应式断点演示”，字号更小，颜色也更浅。右侧是一个带紫色背景的圆角标签，默认显示“手机”。这个默认结果并不是随机产生的，而是因为初始选中的位置落在四个设备名称中的第二个位置。

标题下方是一排四个设备切换项，依次为“手表”“手机”“折叠屏”“平板”。当前项使用紫色背景和白色文字，其他项使用浅灰背景和深灰文字。四个选项平均分布在一行中，选项本身是带圆角的文字块，点击区域比文字略大，便于触摸。

再往下是一个浅紫色的大卡片。卡片标题为“当前模拟设备”，中间用较大的紫色文字显示设备尺寸和倍率，例如手机档位对应“360vp · 2.0x”。尺寸字符串下方还会显示一条布局说明，说明当前档位在页面设计中的位置，例如紧凑布局、响应式布局或宽幅布局。这里的“模拟”很重要，它说明卡片是在展示预设档位，而不是把真实设备测量结果反馈给用户。

页面下半部分是六个固定入口卡片，名称分别是“今日推荐”“订单中心”“收藏商品”“消息通知”“个人资料”“设置”。每张卡片上方有一个紫色符号，下方是入口名称。卡片使用白色背景和圆角，排列在一个网格中。切换前两个设备档位时，网格显示两列；切换后两个档位时，网格显示三列。入口的名称、图标和卡片高度不会因为档位变化而替换，变化主要体现在列数和由此带来的排列方式。

页面最底部是一句居中的浅灰色提示：“切换设备，预览断点、栅格与字号策略”。它是对当前演示方式的概括，提示用户通过上方选择项观察界面变化。页面没有给六个入口附加跳转动作，也没有在点击卡片时进入新的页面。

四个设备档位实际上是一组固定数据

页面把四个设备名称放在同一组顺序数据中：手表、手机、折叠屏、平板。每个名称都有一个位置，从零开始分别对应 0、1、2、3。页面只有一个真正参与交互的选择状态，切换名称时改变的就是这个位置值。

这种设计的优点是关系清楚。名称、尺寸文字、右上角标签和布局说明都根据同一个位置取值，所以不会出现标签已经显示“平板”，而尺寸文字仍然显示手机的情况。用户点选第四项时，页面所有与当前设备有关的区域都会按照第四个位置重新计算。状态来源只有一个，多个显示区域共享这个来源，页面的表现比较容易追踪。

与四个名称对应的尺寸文字是“240vp · 1.5x”“360vp · 2.0x”“720vp · 2.5x”“960vp · 3.0x”。这些文字并不是实时测量出来的数字，而是预先写好的展示内容。它们在页面中承担的是“档位标签”的作用，让用户看到选择不同设备时，页面会展示不同的宽度单位和倍率组合。

这里还需要区分两个概念：页面展示了 vp、fp 和响应式断点这些词，但它并没有根据实际的 vp 数值计算字体，也没有根据 fp 值动态缩放文字。字号在界面中是固定设置的，设备切换只改变当前设备文案、尺寸字符串、说明文字和网格模板。把副标题里的专业术语直接理解成已经完成了完整适配能力，会超出这个页面能够证明的范围。

默认选择为什么是手机

页面第一次出现时，右上角标签是“手机”，大卡片中的尺寸文字是“360vp · 2.0x”，下方说明属于前两个档位使用的紧凑分组，网格呈现两列。这个初始状态让页面一打开就有一个具体的设备场景，不会出现标签为空、尺寸文字缺失或者卡片没有布局说明的问题。

默认值也决定了演示的第一眼重点。手机通常是用户最熟悉的基准，先展示手机档位，随后再点击手表、折叠屏和平板，可以直观看到紧凑设备和较宽设备之间的排列差异。重新打开页面后，选择会回到手机，说明这个选择只是当前页面运行期间的临时状态，没有保存到本地，也不会因为上一次选择了平板而在下次启动时继续保留。

选择项的高亮如何变化

四个设备项都由同一组名称生成，每个项拿到自己的位置。显示颜色会把自己的位置与当前选择位置进行比较：两者相同，就使用紫色背景和白色文字；两者不同，就使用浅灰背景和深灰文字。点击某项后，当前选择位置改变，四个项会重新计算颜色，因此高亮会从原来的位置移动到新的位置。

这个变化没有额外的提示框，也没有单独的“已选择”文字。用户通过颜色、标签和下方卡片的同步变化判断操作结果。对一个只有四个选项的轻量演示来说，这样的反馈已经足够直接：点击手机时手机项变紫，点击平板时平板项变紫，右上角标签也同时替换。

从上到下理解页面布局

页面最外层采用纵向排列。所有区域按照标题、设备选项、设备信息卡、入口网格、底部提示的顺序向下堆叠。纵向容器设置了统一的区域间距，并在四周留出内边距，所以内容不会紧贴屏幕边缘。页面背景是接近白色的浅灰色，设备信息卡使用更明显的浅紫色，入口卡片使用白色，这三层颜色让页面产生了清楚的区域层次。

标题区域的左右关系

标题区域是一个横向容器。左侧的两行文字放在一个纵向小容器中，标题和副标题之间只有较小间距；右侧是当前设备名称标签。左侧区域占据剩余空间，右侧标签根据文字宽度显示，所以不同设备名称不会把标题挤到固定的奇怪位置。

主标题字号为 25，使用粗体；副标题字号为 14，颜色是较浅的灰色；右侧标签字号为 16，文字为白色，四周有内边距，背景为紫色并带有较大的圆角。标题承担页面说明，标签承担当前状态，两者在同一行中形成“固定说明 + 动态状态”的关系。

设备选项的间距与触摸区域

四个设备名称位于第二个横向容器中，选项之间保留固定间距，并使用两端分布的排列方式。每项文字外侧有内边距，背景和圆角共同构成一个小按钮。由于选项的宽度会随文字和内边距变化，手表、手机、折叠屏和平板并不是完全相同宽度的矩形，但整体仍然保持一行分布。

点击动作绑定在文字容器本身。当用户点击某个选项时，页面只需要把当前位置设为该选项的位置，其他显示区域便会自动刷新。这里没有用四个重复的处理函数分别写四套逻辑，名称循环和当前位置参数让交互规则保持一致。

设备信息卡的结构

设备信息卡是一个纵向容器，内部依次放置“当前模拟设备”、尺寸倍率文字和布局说明。卡片有 18 的内边距和 20 的圆角，背景使用浅紫色，整体宽度占满可用区域。

标题字号为 18，使用中等字重；尺寸文字字号为 30，使用粗体和紫色，是卡片的视觉重点；说明字号为 15，颜色为深灰色，用来补充当前档位的布局描述。三行文字之间用较小的垂直间距分开，用户可以迅速扫到最重要的尺寸文字，再看到说明。

卡片显示的不是一组独立状态。标题始终不变，尺寸文字从四个固定字符串中按当前位置取值，说明文字根据当前位置落在哪个分支中取值。右上角设备标签和这张卡片共用相同选择来源，所以点击设备项后，两处内容会同步改变。

网格区域的尺寸分配

网格区域使用剩余空间布局。六个入口卡片由固定入口名称生成，每个入口都被放入一个网格项。网格有 10 的行间距和列间距，宽度占满页面，卡片在单元格中使用全宽，固定高度为 92。

网格项内部还是一个纵向容器：上面是紫色符号，下面是入口名称。符号字号为 25，入口名称字号为 13，两个内容之间保持一定空间，并通过居中方式放在卡片中央。卡片背景为白色，圆角为 14，和浅灰页面背景形成对比。

真正控制列数的是当前选择位置的条件。手表和手机属于前两个位置，网格模板使用“两列”；折叠屏和平板属于后两个位置，网格模板使用“三列”。所以六个卡片在两列模式下会形成三行，在三列模式下会形成两行。卡片内容没有变化，变化的是每行能放下几个卡片。

页面中的说明文字可能写出“2 列紧凑布局”“3 列卡片布局”“4 列响应式布局”“6 列宽幅布局”等描述，但实际网格模板只有两列和三列两种。阅读这个页面时，应以真实看到的卡片排列为准：前两项是两列，后两项是三列。描述文字更像是对档位的概念说明，并不代表页面真的创建了四列或六列网格。

一次点击会改变哪些地方

把一次操作拆开看，页面的反馈链条非常短。用户先点击一个设备名称，点击事件把当前选择改成被点击项的位置；状态更新后，依赖这个选择的位置重新计算。右上角名称标签、设备卡片中的尺寸文字、设备卡片中的说明、四个选项的高亮样式和入口网格的列模板，都会参与这次刷新。

例如从手机切换到手表，右上角的“手机”会变成“手表”，手机项从紫色变为浅灰，手表项从浅灰变为紫色。设备卡片的尺寸文字从“360vp · 2.0x”变成“240vp · 1.5x”。说明文字切换到紧凑设备对应的描述。下方六个入口不再以三列或其他猜测方式排列，而是按照前两个档位对应的两列模板排列。

从手机切换到折叠屏时，右上角标签显示“折叠屏”，尺寸文字显示“720vp · 2.5x”，选项高亮移动到第三项。设备卡片的说明进入第三个分支，入口网格切换到三列。此时六张卡片每行显示三张，因此总共两行，页面底部提示的位置会随着网格高度变化而变化。

从折叠屏切换到平板时，网格仍然是三列，因为这两个设备使用同一组列模板。虽然尺寸文字和布局说明会变化，选项高亮也会变化，但卡片排列方式不会再次变化。这说明设备名称、尺寸文字和列数并不是一一对应的四种完全不同布局，而是四个档位共享两种网格模式。

用户反复点击同一个选项时，选择位置的值不会产生新的语义变化。高亮仍然停留在原位置，右上角标签、尺寸文字和网格排列也保持不变。由于页面没有动画计数、提示消息或额外记录，重复点击主要用来确认当前状态保持稳定。

六个入口卡片为什么保持固定

“今日推荐”“订单中心”“收藏商品”“消息通知”“个人资料”“设置”是页面中最稳定的一组内容。无论用户选择哪一种设备档位，这六个名字都存在，图标顺序也不变。它们的作用不是实现六个真实业务模块，而是提供足够明确的卡片内容，让用户观察两列和三列排列的变化。

入口名称覆盖了推荐、订单、收藏、消息、资料、设置几个常见导航语义，长度也有所不同。这样排列时，卡片中既有两个字的“设置”，也有四个字的“今日推荐”和“消息通知”，能让观察者看到不同文字长度在同一高度卡片中的表现。实际页面没有为它们设置点击事件，因此点击卡片不会打开详情，也不会改变当前设备状态。

六个符号同样是固定展示内容。它们不是从图标资源中动态加载的图片，而是以字符形式显示在卡片上方。符号使用统一紫色，名称使用深灰色，所有卡片采用同样的字号、间距和圆角，因此网格的视觉重点落在布局变化，而不是不同卡片的样式差异。

两列模式下，每行有两张卡片，六个入口分成三行；三列模式下，每行有三张卡片，六个入口分成两行。由于每张卡片高度固定，列数变化会直接影响网格整体高度。这种差异在页面底部比较容易观察：两列模式占用更多垂直空间，三列模式占用更少垂直空间，底部提示随剩余空间重新分配。

设备档位与真实适配能力的边界

这个页面可以帮助开发者理解“选择一个档位后，布局按照条件变化”的基本思路，但它不能证明应用已经具备真实的多设备适配能力。页面没有读取窗口宽度，没有监听屏幕尺寸变化，也没有识别折叠屏展开或合拢状态。四个名称和四条尺寸字符串都是固定内容，用户通过点击标签主动选择场景。

页面也没有使用真实断点计算入口卡片宽度。网格列数只有一个简单条件：选择位置小于 2 时两列，否则三列。这里的条件是设备名称位置的条件，并不是“窗口宽于某个值就三列”的宽度断点。页面没有在运行中测量可用宽度，也没有因为字体放大、窗口缩小而重新安排网格。

同样，页面中的倍率文字只是卡片上的文字。它不会改变标题字号、入口名称字号、图标字号或卡片高度。无论显示 240vp 还是 960vp，标题仍保持原来的字号，入口卡片仍保持固定高度。副标题提到 vp、fp 和响应式断点，但当前交互只更新显示文字和网格模板，不能把这些术语当成已经接入系统适配链路的证据。

如果把它作为真实应用的起点，后续还需要引入窗口尺寸变化来源，再制定明确的断点规则，并对文字、卡片、间距和可用空间分别做测量。折叠屏还需要考虑连续屏与分区状态，平板需要考虑横竖屏和窗口化场景，手表则要考虑更小的触控区域和信息密度。这些都属于后续能力，当前页面没有实现，文章也不应把它们写成现有功能。

从界面观察声明式更新

这个演示非常适合观察声明式界面的特点。页面不是在每次点击后逐个寻找右上角标签、设备卡片和网格，再手动修改它们的内容，而是把这些内容写成当前选择的结果。点击只改变选择，界面根据选择重新描述自己应该显示什么。

这种方式让页面的几个区域保持一致。右上角标签读取当前设备名称，设备卡片读取同一位置对应的尺寸文字，选项样式比较自己的位置与当前位置，网格列数也比较当前位置是否小于 2。因为它们都从同一个选择状态推导，所以用户切换一次后可以同时看到多个区域变化，而不需要为每个区域维护一个容易失配的独立开关。

状态数量少并不代表页面没有值得观察的细节。一个位置值同时影响文本、颜色、布局模板和网格高度，这正是状态驱动界面的典型特征。它也提醒我们，设计状态时要先找出真正的变化源，再让其他内容从变化源推导出来。若把设备名称、尺寸文字和列模式分别设置成三个状态，后续就可能出现名称已经切换而列数没有切换的情况。

运行时可以观察的几组场景

第一组场景是初始手机档位。页面顶部显示手机，设备卡片显示 360vp 和 2.0x，手机选项呈现紫色高亮，六张卡片使用两列。这个场景可以确认默认选择、标题标签、尺寸字符串和网格初始模板是否一致。

第二组场景是手表档位。点击手表后，标签和尺寸文字切换到手表对应内容，网格仍然保持两列。这个场景说明前两个设备虽然名称和尺寸不同，但在当前演示中共享紧凑排列方式。观察重点不是寻找真实手表窗口，而是确认选择变化能够带动多个展示区域。

第三组场景是折叠屏档位。点击折叠屏后，设备卡片显示第三条尺寸文字，说明文字切换到第三个分支，六个入口改为三列。此时可以数一数每行的卡片数量，确认页面实际从两列变为三列。

第四组场景是平板档位。点击平板后，名称、尺寸和说明继续更新，但网格仍是三列。这个场景能帮助区分“设备文案变化”和“布局模板变化”：不是每次名称变化都会带来新的列数，后两个档位在当前页面中使用相同的三列模板。

第五组场景是按照手表、手机、折叠屏、平板的顺序连续点击。连续操作可以观察高亮是否始终只有一个、右上角标签是否跟随当前项、网格列数是否在第二项到第三项之间发生一次切换。由于选择没有持久化，重新打开页面后还会回到手机档位。

页面视觉层次的实际作用

页面的颜色并不是为了表达复杂业务状态，而是为了让当前选择和布局演示容易被看懂。紫色被用于当前设备标签、选中项、尺寸重点文字和入口符号，形成统一的强调色。浅灰用于未选项和页面背景，深灰用于普通文字，白色用于入口卡片。颜色层次把“当前状态”“重要数值”和“普通说明”区分开。

标题区域使用较大的主标题和较浅的副标题，用户先看到页面主题，再看到这页演示涉及的词语。右侧标签使用胶囊形背景，即使设备名称发生变化，仍然在同一位置承担状态标识。选项行使用较小的圆角按钮，和上方较大的标签形成尺寸层次。

浅紫色设备卡片是页面的中心区域。它的背景与普通页面背景有轻微差异，圆角和内边距让三行文字形成一个完整的信息块。大字号尺寸文字负责吸引注意力，布局说明负责解释当前档位的提示。六个入口卡片则使用白色，卡片之间通过间距分隔，避免六个符号和名称混在一起。

页面没有复杂的阴影、渐变或动画，视觉变化主要来自颜色、文字和列数。这样的处理与页面的演示目的相符：如果装饰过多，用户可能注意到颜色变化，却忽略了网格从两列变为三列这一核心现象。

容易产生误读的地方

第一处误读是把“手表、手机、折叠屏、平板”当成真实设备检测结果。实际上它们只是四个可点击的固定标签。页面不会因为连接到哪一种设备而自动改变，用户必须主动点击。

第二处误读是把尺寸字符串当成真实测量值。240vp、360vp、720vp 和 960vp 是页面展示给用户的文字，倍率也是固定文字。它们没有被用来计算卡片尺寸，也没有驱动字体缩放。

第三处误读是把布局说明中的数字当成网格真实列数。实际可见的网格只有两列和三列两种，前两个选择使用两列，后两个选择使用三列。说明文字中的其他数字应当作为档位描述阅读，不能用来推断页面创建了对应数量的列。

第四处误读是把六个入口名称当成可用的业务功能。它们只是固定卡片，当前没有点击处理或数据加载。它们的存在是为了让网格排列具有足够内容，也让两列和三列之间的差异更明显。

第五处误读是把“响应式断点演示”理解为完整响应式系统。页面只是根据选择位置应用一个条件模板，并没有监听窗口变化，也没有实时断点。它展示的是一个易于理解的条件布局样例。

这个小页面适合怎样学习

如果正在学习 ArkUI，可以先只观察顶部四个选项。理解它们如何共享一个当前选择，再看右上角标签和中心卡片为什么能够同步变化。接着观察网格列数：前两个选项为两列，后两个选项为三列。最后再看六个入口卡片在不同列数下的行数变化。

如果正在学习布局，可以把页面分成五个区域：标题行、选项行、信息卡、入口网格和底部提示。每个区域都有明确职责，区域之间由纵向间距隔开。标题行内部又分成左侧标题组和右侧状态标签，信息卡内部按标题、主数据、补充说明排列，入口卡片内部按符号和名称垂直居中。

如果正在学习状态驱动界面，可以记录一次点击前后所有变化：点击对象、当前标签、选中颜色、尺寸文字、说明文字、列数和网格行数。这样能发现，页面并不是只有一个地方改变，而是多个视觉结果由同一个选择状态统一推导。

如果正在学习适配概念，应当把这个页面当作“模拟输入 + 条件布局”的练习，而不是完整适配方案。真正的适配需要真实窗口信息和更多边界处理，当前页面只把不同档位的展示关系做成了可点击的演示。

可以从页面得到的设计经验

第一，演示数据要有清楚的对应关系。四个设备名称、四条尺寸文字和四段说明按照同一位置排列，用户切换后不容易迷失。即使后续扩展数据，也应保持名称、尺寸和说明的顺序一致。

第二，变化范围要控制在一个清晰的维度内。当前页面没有让入口卡片名称随设备变化，也没有让卡片样式完全重做，而只改变列模板。这样用户可以把注意力放在布局差异上。

第三，选中态要在多个区域形成闭环。选项颜色告诉用户点中了什么，右上角标签告诉用户当前选择，中心卡片给出更完整的解释，网格则给出布局结果。文字、颜色和排列共同提供反馈。

第四，页面说明应该和实际结果相互印证。如果描述声称某档位是六列，实际却没有六列，读者就会产生疑问。因此分析时要以可见排列为准，明确说明文字和实际网格之间的差异，避免把概念标签写成已经完成的能力。

第五，固定卡片也可以承担布局测试素材的作用。六个入口名称长度不同，图标和名称上下排列，既能填满两列和三列，也能观察卡片在不同列宽下是否仍然保持居中和可读。即使没有业务点击，固定内容仍然有清晰的演示价值。

适配能力如果继续发展，需要补什么

当前页面完成的是手动选择档位。若要继续发展成真实适配页面，第一步需要获得窗口的实际可用宽度，而不是依赖用户点击设备名称。接着要定义断点：在哪个宽度区间使用两列，在哪个区间使用三列，卡片最小宽度是多少，文字是否需要换行。

第二步需要处理窗口变化过程。平板可能以分屏窗口运行，折叠屏可能在展开和合拢之间切换，手机也可能出现横竖屏变化。真实页面不能只在启动时判断一次，而要能在窗口变化后重新计算可用布局。

第三步需要把字号策略落实到显示结果中。当前页面展示了 vp、fp 等词，但所有文字字号都是固定值。真实字号策略应当说明哪些文字使用固定字号，哪些文字随用户字体设置变化，卡片内文字过长时如何处理，放大字体后入口名称是否会与符号重叠。

第四步需要重新验证卡片触摸区域。手表等小屏设备对触控区域和信息密度更敏感，六个入口不一定适合直接沿用手机布局。平板宽屏则可能需要更大的卡片、更多内容或不同的空白比例。

第五步需要为真实入口增加行为。当前六张卡片没有点击处理，如果要变成应用首页，就需要为每个入口配置页面跳转或内容更新，同时保留设备变化后布局不乱的约束。只有这些能力真正加入并验证后，才能把页面称为完整的多设备应用布局。

结语

这个页面的重点不是模拟出四种真实设备，而是用一个非常小的交互闭环，让设备档位、状态选择、文字反馈和网格布局之间的关系变得可见。用户点击手表、手机、折叠屏或平板，页面会同步更新右上角名称、中心卡片的尺寸文字、布局说明、选项高亮和六个入口的列数。

从实际效果看，手表和手机使用两列网格，折叠屏和平板使用三列网格。六个入口名称和图标保持固定，区别主要是每行放置的卡片数量和网格整体高度。240vp、360vp、720vp、960vp 及倍率文字是预设展示数据，不是实时测量值；“响应式断点”是页面主题说明，不是窗口监听结果。

把这些边界讲清楚，反而能更准确地理解这个小页面的价值。它适合用来学习如何让一个选择状态驱动多个 UI 区域，也适合观察两列和三列模板带来的排列变化。至于真实窗口适配、折叠状态识别、动态字号和多设备业务入口，则需要在这个演示基础上继续建设，不能从当前页面直接推导出来。

四个档位放在一起观察

把四个选项放在一起看，可以发现它们并不是四套完全独立的页面，而是同一套页面内容的四种说明状态。手表、手机、折叠屏和平板只负责提供不同的名称和位置，中心卡片再根据位置显示相应的尺寸文字，网格则根据前后两个位置组选择列模板。这种组织方式让页面很适合做横向比较：不需要离开当前页面，也不需要等待新的数据加载，点击一个名称就能把对应结果展示出来。

手表档位的重点在于“较小档位”的表达。它显示 240vp 和 1.5x，说明文字属于紧凑布局分支，下方六张卡片按两列排列。这里的两列并不是因为页面真的知道手表屏幕有多宽，而是因为手表排在前两个位置。观察者能看到小档位对应的文字变化和卡片排列，却不能把这一结果解释成手表适配已经完成。

手机档位是页面的初始基准。它显示 360vp 和 2.0x，标签和选项高亮都指向手机，网格仍是两列。手表与手机之间切换时，网格列数不变，只更新名称、尺寸和选中状态。这个对照说明页面的“设备变化”与“列数变化”不是同一个维度，前两个档位共享同一列模板。

折叠屏档位是观察列数切换的关键。它显示 720vp 和 2.5x，六个入口从两列改为三列，每行卡片数量由两张变为三张。中心卡片的说明也进入另一段文字分支，但卡片名称和符号仍保持原样。折叠屏在这里是一个手动选择的场景标签，而不是由折叠传感器产生的状态。

平板档位显示 960vp 和 3.0x，网格继续使用三列。它和折叠屏之间切换时，排列数量不会再次改变，但尺寸文字、选项高亮和布局说明会更新。这个对照很有价值，因为它能提醒使用者：四个设备档位只映射到两种实际列模板，不能看到四条尺寸文字就推断页面具有四套栅格。

一次切换中哪些内容先被注意到

用户点击设备名称后，最先容易注意到的是选项行的颜色。原来的紫色按钮变成浅灰，被点击的按钮变成紫色，反馈非常明显。随后视线通常会移动到右上角标签，因为标签位于标题行的末端，和设备选项形成上下呼应。再往下看，浅紫色卡片中的大字号尺寸文字会更新，最后才会发现入口卡片的列数和行数发生了变化。

这种从颜色到文字、再到空间排列的反馈顺序，是页面视觉设计的一部分。颜色变化提供即时确认，标签提供简短确认，尺寸卡片提供详细确认，网格提供结构确认。四个层次使用的是同一个选择位置，所以不会出现用户已经看到新按钮高亮，但其他内容仍停留在旧档位的断裂感。

在手机切换到折叠屏的场景中，这个顺序尤其容易观察。手机按钮的紫色先消失，折叠屏按钮变紫；右上角的手机改成折叠屏；尺寸文字从 360vp · 2.0x 变为 720vp · 2.5x；六张卡片重新分成两行三列。页面没有弹窗或加载动画，所有反馈都属于当前布局的即时变化。

如果从平板返回手机，变化顺序相反：平板按钮失去高亮，手机重新获得高亮；尺寸卡片回到手机文案；六张卡片从三列恢复为两列并增加一行。底部提示仍然保持同一句话，因为它只是固定说明，不参与设备档位的变化。这个固定部分和动态部分同时存在，使页面既有稳定的阅读锚点，也有清楚的切换反馈。

页面中保持不变的部分同样重要

适配演示不能只观察变化，也要注意哪些内容没有变化。标题“多设备屏幕适配”始终保持不变，副标题也始终保持不变；中心卡片的标题“当前模拟设备”不变；六个入口的名称和符号不变；底部提示不变。变化被限制在设备标签、选项样式、尺寸文字、说明文字和列模板这几类结果中。

这种“固定内容 + 动态内容”的划分让页面结构稳定。用户不论选择哪一项，都能在同样的位置找到标题、设备信息和入口卡片，不需要重新学习界面。动态内容只在需要表达档位差异的地方出现，避免整个页面因为一个选择而改头换面。

入口卡片固定还有一个实际作用：它让列数变化更容易比较。如果每个设备档位都使用不同的入口名称，用户很难判断变化究竟来自内容变化还是布局变化。现在六个入口始终相同，观察者只需要数每行有几张卡片，就能确认两列和三列的差异。

中心卡片的宽度、圆角、内边距和文字层级也保持一致。即使尺寸文字从较短的手机档位切换到其他档位，卡片不会换成另一种样式。这样可以把注意力集中到文案和列数，而不是卡片装饰。

网格两列与三列的空间差异

六个入口在两列模式下分成三行。每一行有两张卡片，行与行之间有固定间距，因此网格的纵向占用更大。卡片的宽度由页面可用宽度、左右内边距、两列间距共同决定，每张卡片有较充足的横向空间，四字名称通常有更好的呼吸感。

切换到三列后，六个入口变成两行。每行多放一张卡片，网格整体高度减少，但每张卡片的可用宽度也相应减少。由于名称和符号都居中，卡片即使变窄，仍然保持统一的视觉中心。两种模板没有改变卡片固定高度，区别主要来自列数和单元格宽度。

从两列切到三列时，底部提示可能向上移动，因为网格不再需要第三行。这个位置变化不是底部提示本身的状态变化，而是上方内容高度变化后，纵向容器重新分配剩余空间的结果。理解这一点有助于区分“某组件自己改变了位置”和“前面内容高度变化带来的整体布局变化”。

页面没有设置滚动列表，也没有为六个入口添加懒加载。六项固定内容全部参与当前页面的布局，数量很小，不需要把它当成大数据列表处理。这里的网格更接近一个静态入口展示区，主要用于观察列模板，而不是演示复杂的数据加载能力。

这个演示对实际页面设计的提醒

如果一个页面需要支持多个窗口档位，首先要确定哪些变化必须跟随窗口变化，哪些内容可以保持稳定。当前页面把设备名称、尺寸说明和网格列数作为可观察变化，把入口名称、图标和卡片高度保持稳定，这种取舍让示例足够简单。真实页面也可以沿用这个思路，先固定信息结构，再逐步加入必要的自适应规则。

其次，描述文字与实际布局必须一致。当前页面的说明分支包含“4 列”和“6 列”等概念化文字，但实际网格只有两列和三列。阅读或使用这类页面时，要把可见结果作为判断依据。如果要把页面用于正式产品，说明文字也应当改成与实际模板一致，避免用户根据文字期待不存在的列数。

再次，设备名称不等于窗口输入。名称适合用于演示、教学或手动预览，真实产品则需要从窗口和设备环境获得输入。两者的关系可以在概念上对应，但不能把手动选择产生的结果称为系统自动适配。把这条边界写清楚，才能避免演示页面被误解为完整平台能力。

最后，交互反馈需要覆盖用户能看到的结果。当前页面让选中项颜色、标题标签、尺寸卡片和网格同时响应，用户不需要猜测点击是否生效。将来即使加入真实窗口监听，也应保留类似的可见反馈，让用户知道布局为何发生变化，以及当前页面采用了哪一种排列方式。