你将构建： 一个针对平板和手机调整过的落地页，带流式宽度、自动换行的行和更小的字号
请先阅读： 构建落地页
在本教程中，你会把一个在桌面上看起来正常的页面，调整到适合平板和手机。你将了解样式值从哪里来、如何重置它，以及如何构建能自行适配的布局。使用“构建落地页”教程中的页面，或任何带首屏和一排卡片的页面都可以。
选择断点
查看全部三个画板
打开页面。画布为每个断点显示一个画板：Desktop（1440 px）、Tablet（768 px）和 Phone（390 px）。它们渲染的是同一个页面，所以你在桌面上工作时，也能看到手机上的问题。
用断点切换器切换
断点切换器位于工具栏中、页面切换器旁边：一个显示器、一个平板和一个手机图标。选择平板图标。视图会移到平板画板，检查器顶部会显示 Editing Tablet。
了解样式的流向
样式从大到小流动。桌面的值在所有地方生效。平板的值在平板和手机上覆盖桌面的值。手机的值覆盖前两者，仅在手机上生效。在桌面上的修改，永远不会影响你在较小断点上自己设置过的值。
查看和重置覆盖
在平板上修改一个值
在 Tablet 激活时，选中首屏，在 Layout 分区中修改它的 Padding。只有平板和手机画板会变化。
查看标签旁的圆点
Padding 旁边现在出现一个小圆点。把鼠标悬停在标签上，可以看到值的来源：
Set on Tablet表示你在这里设置的值，Inherited from Desktop表示来自更大断点的值，From class .feature-card表示来自某个类的值。重置它
点击圆点，或按住 ⌥ 点击标签。平板上的值会被移除，首屏重新使用桌面的内边距。
让行自动换行
打开 Wrap
切回 Desktop，选中功能区。在 Layout → Direction 中，打开箭头旁边的 Wrap 开关。当卡片放不下时，它们会移到新的一行，而不是被压缩。
给卡片设置最小宽度
选中一张卡片。把鼠标悬停在 Size 分区标题上，点击 +（Add min/max）。在新的 Min 行中，把 W 设为
280px。现在只要每张卡片的宽度会小于 280 px，它们就会换行。添加间距
再次选中这一行，在 Layout 中设置 Gap。无论卡片并排还是上下排列，都使用同样的间距。
在平板画板上，卡片换成两行显示。桌面上它们仍在一行中。为此你没有在平板上做任何设置。
使用流式尺寸
填满宽度
选中首屏图片。在 Size 中，把 Width 模式设为 Fill。图片在每个断点上都会占满父元素的宽度。
用最大值限制它
在 Size 标题中点击 +（Add min/max），把 Max 行中的 W 设为
960px。在桌面上图片最宽到 960 px；在平板和手机上它仍然填满宽度。试试相对宽度
选中首屏的文本组，把 Width 模式设为 Relative，然后输入
80（单位是%）。相对宽度跟随父元素，所以文本在每个屏幕上都保持相同的比例。
调整手机
切换到 Phone
在断点切换器中选择手机图标。检查器顶部显示 Editing Phone。
缩小标题
选中标题。在 Typography 中，在 Style 一行调小字号，比如从
56px改为36px。桌面和平板保留原来的字号。让首屏纵向排列
如果首屏是水平堆叠，在手机上把 Layout → Direction 设为 Vertical（向下箭头）。同时调小它的 Padding，让内容有足够空间。
检查结果
预览
按 ⌘↵ 预览。再按一次回到编辑状态。
逐个检查断点
依次选择每个断点，浏览整个页面。选中一个元素并悬停在它的标签上，看看哪些值是在该断点上设置的。
页面在三个画板上都清晰易读：卡片在平板上换行，标题在手机上更小，图片宽度从不超过 960 px。
你学到了什么
- 桌面的值会向下流到平板和手机；较小的断点只保存你在那里修改的内容。
- 标签旁的圆点告诉你值从哪里来，点击它就能重置这个值。
- Wrap、最小和最大尺寸、Fill 和 Relative 宽度都能自行适配，因此你需要的覆盖更少。
继续学习后面的教程，或阅读本教程背后的指南：