让页面响应移动设备

在本文中,您将了解到如何将PageFly页面设计为响应式。 您需要记住下面这些提示,以确保访问者的体验顺畅。

提示 1: 永远不要固定图片大小

默认情况下,所有布局都是响应式的,因此请不要为任何元素设置固定的图像大小(包括宽度高度)。

常规选项卡 > 内容部分 > 图片大小中看到的值是默认值。 它们对不同的设备做出响应,因此请保持这种状态。

mobile responsive

你可以看到在每个设备上的状态:笔记本,平板和手机。

mobile responsive pagefly

重要提示:如果要为元素设置水平和垂直尺寸,请使用百分比外边距内边距

提示 2: 请使用百分比外边距和内边距

用内边距设置尺寸

通常,当您为某个部件设置图片背景时,它会首先像这样显示。

pagefly mobile responsive

切换到样式选项卡 > 间距部分 > 在“%”单位中填写顶部内边距底部内边距。 本示例中,将顶部填充和底部填充都设置为30%。

mobile responsive 1

单击更多设置按钮,可以设置图像的背景位置和背景尺寸。 本示例中,设置“中心位置”和“背景尺寸的封面”。

make a page mobile responsive

然后,您可以通过选择设备切换器 > 平板电脑移动设备来检查响应式设计。

设置元素的水平位置

要设置元素水平位置,请使用“%”单位,以便可以在不同的屏幕尺寸上做出响应。

在本示例中,我们希望将段落移动到更靠近中心的位置,因此我们增加包含该段落部件右内边距左内边距值。

选择部件 > 样式选项卡>盒子样式部分,然后增加右内边距左内边距“10%”。

当您要在元素的两侧设置不相等的间距时,此方法非常有用。

要在移动设备上检查设计,顶部栏 > 设备切换器 > 选择移动设备

选择部件 > 样式选项卡 > 盒子样式。 您会看到它的左内边距右内边距值为“ 10%”。

全部视图上进行设置时,可以增加这些值。

如果你不喜欢在手机上的内边距,可以把边距值设为“0px”。

提示 3: 为每种设备进行样式定制

您可以通过配置样式选项卡来为特定设备(笔记本电脑平板电脑移动设备)自定义元素设计。

本示例中,在全部视图上,该部件的顶部和底部内边距为“ 30%”。

我们可以在设备切换器 > 切换到平板电脑(或移动设备)> 样式选项卡,分别为平板电脑移动设备编辑内边距。

在特定设备上隐藏元素

借助PageFly的设备自定义设计,您可以将特定设备上把元素隐藏起来,从而在一个页面上创建各种设计。

选定元素后,转到常规选项卡 >可见度部分。

例如,我们希望狮子部件仅作为横幅广告显示在移动设备上,而在其他设备上隐藏。

那么,我们选择狮子部件 > 常规选项卡 > 在台式机笔记本电脑平板电脑启用隐藏。

反之亦然,我们选择老鹰部件> 常规选项卡 > 在手机启用隐藏

老鹰部件将出现在所有设备上,但在受上隐藏。

如果您认为需要视频来详细说明内容,可以在下面观看有关如何构建移动响应页面的视频

还有一个视频,指导如何使用Flex选项调整布局

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages