让您的站点在手机和平板上显示得恰到好处
查看店铺在平板和手机上的样子，在小屏幕上隐藏区块，并只针对某一种屏幕尺寸调整区块的位置。
大多数顾客用手机访问店铺，所以您的页面必须在各种尺寸下都能正常使用。您只需设计一次，Payly 会为平板和手机自动调整页面。本文说明哪些调整是自动完成的，以及当您希望某个区块在小屏幕上有不同表现时该怎么改。
布局如何自动适应
区块位于 12 列网格的单元格中，而不是固定的像素位置，因此在小屏幕上不会互相重叠。页面会在两个临界点切换布局：
- 平板（宽度小于 1024 像素的屏幕）沿用同一套网格。除非您专门为平板移动它，否则区块保持原位。
- 手机（宽度 760 像素或更窄）会让每个区块独占一行并占满整行宽度。区块按您在桌面上阅读的顺序从上到下堆叠：先从上到下，再从左到右。
有些区块还会进一步调整。页眉链接会收进菜单按钮，网格会折叠为单列，图库和徽标条则显示两列。这样，店铺无需任何额外设置就能在手机上正常使用。
在不同屏幕尺寸之间切换
- 在编辑器顶部栏中，点击平板或手机。页面会收窄，显示它在该尺寸下的样子。
- 浏览整个页面，看看有没有读起来不顺的地方。像平时一样滚动和选择区块。
- 点击桌面即可回到完整尺寸的布局。
这些按钮不只是预览，它们还决定了您正在编辑哪一套布局。切换到平板或手机时，会有提示提醒您，所做的更改只适用于该尺寸。您在那里做的任何更改都不会影响桌面布局。
在小屏幕上隐藏区块
一张大照片或一个很长的装饰性区块可能会让手机屏幕显得拥挤。您可以在小屏幕上隐藏它，而在桌面上保留。
- 点击顶部栏中的手机（或平板）。
- 选中该区块。
- 在设置面板中，打开尺寸与位置。
- 打开在手机上隐藏（或在平板上隐藏）。该区块会从这个视图中消失，在线上页面也不会留下空白。
在平板上隐藏的区块在手机上也会被隐藏，除非您在查看手机时再把这个开关关掉。要在所有屏幕上隐藏某个区块，请在桌面视图中使用隐藏这个区块。
在某一种尺寸下摆放不同的位置
- 在顶部栏中选择平板或手机。
- 选中区块并打开尺寸与位置。
- 更改起始列、占几列、起始行或占几行，或点击占满整行宽度。您也可以直接在页面上拖动区块并调整其大小。
尺寸与位置顶部的栏会告诉您正在编辑哪一套布局。当区块沿用较大尺寸的设置时，它显示继承；一旦区块有了自己的设置，就会出现重置按钮。点击重置，区块就会重新沿用较大尺寸的设置。点击所有屏幕都用这套布局，可把当前布局复制到所有尺寸。
顶部栏还会统计与桌面布局不同的区块数量，例如有 1 个区块在手机上不同。点击这个数量，可以在这些区块之间逐个跳转。
让区块在所有屏幕上保持一致
在尺寸与位置中打开所有屏幕保持一致，即可让区块在所有地方使用同一套布局。它原有的平板或手机设置会被移除，之后的编辑会同时应用到所有尺寸。
注意：把区块移到另一个版块会在所有屏幕尺寸下都改变它，所以 Payly 只允许在桌面视图中这样做。如果想让区块在手机上摆放在不同位置，请把它同时添加到两个版块，并在每种尺寸下隐藏不需要的那一个。
检查结果
使用预览，以手机和平板的宽度逐页查看您的页面；在正式宣传之前，也请在真实的手机上看一遍已发布的店铺。请参阅发布前预览您的站点。