让页面响应移动设备

在本文中,您将了解到如何将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选项调整布局

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

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

I got it!
Explore how you can use PageFly to win this Christmas and Year-end sales Check now