内容:
- 激活响应性断点
- 图层响应设置
- 响应大小和位置
- 相关话题
- 响应式设置
- 响应断点
- 响应式设置
- 大小和位置
1.激活响应性断点
为模块启用四个可用的断点以激活响应式编辑。
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/layout-4.jpg)
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/layer-grid-size-1.png)
接下来,在不同的断点之间切换以编辑每个视口的图层。
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/viewport-switcher-3.jpg)
2.图层响应设置
选择您的图层应如何调整大小和位置,并设置不同屏幕尺寸的可见性。
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/responsive-behavior-6.jpg)
智能继承
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/intelligent-inheriting-off-1-3.jpg)
如果将“ 智能继承” 设置为 OFF,则需要为每个响应视口手动设置图层的大小和位置 。
单击“ 从桌面重置所有值”按钮会将所有视口的图层大小和位置重置为其桌面视图的图层大小/位置。
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/intelligent-inheriting-on-3.jpg)
如果将“ 智能继承” 设置为 ON,则在模块调整大小时,图层的大小和位置将自动调整大小/重新放置。
单击“ 从桌面继承所有值”按钮将自动重置所有视口的图层大小和位置。
反应行为
1.在设备之间调整大小
如果您希望为不同的屏幕尺寸调整图层大小,请启用此选项。
2.响应偏移
如果您希望图层针对不同的屏幕尺寸重新定位自身,请启用此选项。
3.响应式子级
如果某个图层具有嵌套的HTML标记,则嵌套的HTML也会被调整大小。
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/responsive-behaviors-3.jpg)
设备可见性
1.桌面视图可见性
当屏幕尺寸在桌面视口中时,显示/隐藏图层 。
2.笔记本电脑视图可见性
当屏幕尺寸在“ 笔记本电脑视口”中时,显示/隐藏图层 。
3. Tablet View可见性
当屏幕尺寸在Tablet Viewport中时,显示/隐藏图层 。
4.手机视图可见性
当屏幕尺寸在手机视口中时,显示/隐藏图层 。
5.
当屏幕尺寸低于在“ 模块的常规设置 ”中设置的“标记的图层”数字时,在“ 隐藏在宽度下”显示/隐藏图层 。
6.显示是否将鼠标悬停在滑块上
选择仅在用户将鼠标悬停在模块上时显示图层。
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/device-visibility-3.jpg)
3.响应大小和位置
在响应视图之间切换, 以针对不同的断点调整图层的大小和位置。
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/resize-viewports-1-3.jpg)
然后针对每个不同的断点调整图层的大小和位置。
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/responsive-preview-3.jpg)
最后,在放置内容时,请确保将“图层”放置在“图层网格”准则之内。
这有助于确保它们不会在模块外部流血。图层网格的大小在模块的断点中定义 。
正确:
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/layers-guidelines-3.jpg)
不正确:
![[Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes. [Slider Revolution 6] Learn how to setup your content to display perfectly on different screen sizes.](https://aladd.net//wp-content/uploads/2020/05/incorrect-position-3.jpg)