为 Magnific 弹出窗口设置模态大小

Question

使用开箱即用的 css、js 和 html，我对 Magnific Popup 的工作方式非常满意。模态框的初始大小（大约 900 X 500 像素）在全屏时很好，但在缩小屏幕时，此插件的响应行为会使模态高度降低太多，并迫使访问者像狄更斯一样滚动。

我想保留所有设置，除了我想在屏幕宽度小于 600 像素时有一个更高的弹出窗口。

我已经尝试了jQuery magnific-popup : open 2 popup iframe with differents width/height 的建议，但是将标记添加到我的初始化 js 只会破坏脚本。

我对javascript知之甚少，所以我很感激任何建议。

Answer 1

您可以使用媒体查询在 CSS 中执行此操作。 (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

@media screen and (max-width: 600px) {
   .mfp-content {
     height: 600px; // or whatever
   }
}

我不能 100% 确定您要编辑哪个 mfp 类，但如果您可以尝试一下并找出答案。我建议使用 Chrome 的设备模拟器来测试移动屏幕。