设计网站时，你永远无法确定访客会使用电脑、平板电脑还是手机访问。最佳做法是将网站设计得兼容不同的设备。你的网站至少应该兼容电脑、平板电脑和手机。
Web 浏览器通过可见屏幕宽度或视口来定义这些设备。例如，Elementor 编辑器默认将视口超过 1024px 的设备定义为 PC，将宽度在 1024px 到 767px 之间的设备定义为平板电脑，将宽度小于 767px 的设备定义为移动设备。视图在不同设备之间切换的点（例如 767px）称为“断点”。
由于一种设计通常无法适用于所有设备，Elementor 编辑器允许您根据不同的设备定制设计。例如，您的菜单在 PC 上显示为水平文本，而在平板电脑或移动设备上显示为下拉菜单。断点定义了这些切换的发生时间。
桌面上显示的主页。
与在移动设备上查看的页面相同。
在不同的设备上查看您的网站
为了创建响应式网站，您需要了解网站在各种屏幕宽度下的显示效果。Elementor 编辑器提供了一种在多种屏幕尺寸下快速测试网站显示效果的方法。
要查看您的网站在不同屏幕宽度下的显示效果：
在顶部工具栏中，点击代表您想要查看的屏幕宽度的图标。默认情况下，有三个图标：一个代表 PC 视图，一个代表表格视图，一个代表移动视图。如果您添加其他屏幕宽度，它们也会显示在此处。有关添加更多屏幕宽度的更多信息，请参阅添加和自定义断点。
上图显示的是平板电脑视图下的网站。
如果您未使用 PC 视图，则屏幕的左侧、右侧和底部有手柄。点击并拖动这些手柄即可更改屏幕尺寸。
针对不同设备进行编辑
Elementor 编辑器允许您为不同的设备自定义许多元素设置。可针对不同设备自定义的设置标有设备图标 – 
要编辑特定设备的设置：
- 您可以通过单击设置旁边的图标并从下拉菜单中选择设备来在设备设置之间切换。
如果您要针对特定设备编辑网站，我们建议您先从顶部栏中选择该设备。请参阅下方示例。
编辑特定设备元素的示例
在此示例中，我们将更改标题的字体，以使其在 PC 和手机上显示不同。
开始之前，请打开或创建一个包含标题小部件的页面。
- 在顶部栏中，单击移动图标。
- 选择标题小部件。
在面板中，单击“样式”选项卡。
在“排版”设置中，点击铅笔图标
设置旁边的图标表示我们正在更改文本的移动设备大小。
在面板中，使用“大小”滑块更改字体大小，以使标题适合一行。
您已更改此元素在手机上的显示方式。
要查看同一页面在 PC 上的显示效果，请执行以下操作：
在面板中的“排版”下，返回“尺寸”设置。
点击移动图标，然后从下拉列表中 
添加和自定义断点
默认情况下，Elementor 编辑器会为三种类型的设备创建页面——PC、竖屏平板电脑和竖屏手机，平板电脑的断点为 1024px，手机的断点为 767px。一些创作者希望能够创建自己的断点或添加其他设备，以获得更大的设计灵活性。这类平板电脑包括宽屏 PC、横屏平板电脑、手机等等。
使用 Elementor 编辑器站点设置，您可以编辑默认设备的断点并添加带有断点的其他设备。
访问断点
可以通过站点设置访问断点。
在工具栏上，单击
从菜单中的“设置”下，选择“布局”。
在面板中，向下滚动到“断点”并展开。
现在您可以编辑断点了。
添加断点
对于想要适应更多设备和用途的创作者，您可以添加额外的断点。
- 按照上面详细说明的方式访问断点菜单。
2在活动断点部分中，单击加号图标
3从下拉菜单中，选择六个断点选项之一，例如，表格肖像。您可以编辑每个断点的默认设置。
自定义断点
Elementor 允许您自定义屏幕宽度以适应新设备。
- 按照上面详细说明的方式访问断点菜单。
在面板的“断点(px)”文本框中，输入新的断点值（以像素为单位）。
您输入的新数字将定义该断点的屏幕宽度。
单击“保存更改”。
评论0