Html 有没有办法阻止离子模式填满屏幕？

我正在使用离子模式显示登录表单。当屏幕很大时，它看起来很棒，它漂亮地位于屏幕中央。但当屏幕缩小到某一点（如iPhone 6大小）时，模式会占据整个屏幕（高度和宽度）。是否有办法确保模式保持小于屏幕

我的html如下所示：

@media (min-width: 0px) {
  .modal-backdrop-bg {
    opacity: 0.5 !important;
    background-color: #000;
  }
}

登录
接近
用户名
密码
登录

经过多次试验，我偶然发现了以下解决方案，似乎效果很好。我将离子模态视图的样式更改为：

---

我知道这很旧，但我解决了这样的背景问题：

@media (min-width: 0px) {
  .modal-backdrop-bg {
    opacity: 0.5 !important;
    background-color: #000;
  }
}

默认情况下，模式的工作方式是，如果窗口大小小于680px，则使模式全屏显示。如果窗口小于680px，则不再需要背景，因此通过将其不透明度更改为0，背景颜色更改为零，将其隐藏

添加此类可防止窗口大小小于680px时背景消失。说到这里，这意味着背景实际上总是在模态后面可见（这根本不应该是个问题，只要确保z-指数是正确的）

---

此外，我还希望将样式添加到类中，而不是将属性内联

如果您的项目使用的是SASS（可能是这样），您可以使用变量：

从_variables.scss：

$modal-bg-color:                  #fff !default;
$modal-backdrop-bg-active:        #000 !default;
$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;

$modal-inset-mode-break-point:    680px !default;  // @media min-width
$modal-inset-mode-top:            20% !default;
$modal-inset-mode-right:          20% !default;
$modal-inset-mode-bottom:         20% !default;
$modal-inset-mode-left:           20% !default;
$modal-inset-mode-min-height:     240px !default;

插入模式变量在您的场景中特别有用

我自己的scss文件中的简短示例：

$modal-inset-mode-break-point:    0px;  // modals are ALWAYS windowed
$modal-inset-mode-right:          5%;   // 5% "margin" to the right
$modal-inset-mode-left:           5%;   // 5% "margin" to the left

// Include all of Ionic
@import "<path to main ionic scss file>";

$model插入模式断点：0px；//情态动词总是有窗口的
$modal inset mode right:5%；//右边5%的“保证金”
$modal inset mode left:5%；//左边5%的“保证金”
//包括所有离子
@输入“”；

---

而且你甚至不必摆弄背景或模态的中心

最重要的是，只有使用sass，并且在scss中进行相应的更改，该方法才会起作用

---

但是，您可以转到ionic.css，找到一个媒体查询，该查询的最小宽度为680px，只有一个，只需将其更改为0px，您就可以随心所欲地播放您的模态尺寸，它不会满。

您可以使用模态控制器获取的第三个参数，通过使用

cssClass

选项，并应用您选择的css

---

这可以在Advanced>选项说明下的中找到。

加1用于解决新问题这仍然有效吗？我将这3行代码添加到我的

app.scss

文件中，对于小型设备，modals仍然是全屏的。（编辑，找到文件，删除了问题的那一部分）它应该（但是，有一段时间没有使用离子）。请注意，这对离子1有效！在重载变量后，确保ionic scss文件包含在您自己的文件中。Nope不起作用。在离子3。如果你看这里的模式顶部等出现在列表中，它不工作。