粉底 在小屏幕上显示大小

Question

我正在使用显示模式，但我发现 - 如文档所示 - 在小屏幕中显示是屏幕宽度和高度的 100%，而我需要一些空间......知道吗？

谢谢

Answer 1

我遇到了同样的问题。基金会的揭示使"小"的所有模态都全屏显示。我想有时为某些个人模态禁用此功能。我查看了设置文件，似乎没有此选项。仅创建我自己的 css 来覆盖这一点是不够的，因为 reveal 还使用 JavaScript 来设置与视口顶部的距离。

理想情况下，我们可以有一个类或属性，如data-reveal-small-full="false"。

作为临时解决方案，我创建了样式显示的强制覆盖，以创建小型全屏行为。

/* Vertical center mixin
   ========================================================================== */
@mixin vertical-align($position: relative) {
    position: $position;
    top: 50% !important;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Force override of default reveal fullscreen for small behaviour 
   ========================================================================== */
[data-reveal-small-full="false"] {
    @include breakpoint(small only) {
        @include vertical-align();
        border-radius: $reveal-radius;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        max-width: calc(100% - 20px);
        min-height: 0;
        width: $reveal-width;
    }
}

Answer 2

您尚未提供任何代码或更多详细信息。

您可以在 reveal 上使用以下类，也可以根据需要创建自己的类：

tiny
small
large
full

https://foundation.zurb.com/sites/docs/reveal.html#sizing

在小屏幕上，模态始终是屏幕宽度的 100%。在中型及更大尺寸的屏幕上，宽度更改为 600 像素（请参阅$reveal宽度设置）。