CSS：iframe 内的最小宽度响应答案

【问题标题】：CSS: min-width responsiveness inside iframeCSS：iframe 内的最小宽度响应
【发布时间】：2017-11-29 23:15:49
【问题描述】：

我正在使用 CSS @media 标签和最大宽度。要求是在大屏幕上具有较小的文本大小，在移动屏幕上具有更大的文本大小。所以在基本层面上我有：

body {
    font-size: 13px;
 }

@media (max-width:991px){
    body{   
        font-size:24px;
    }
}

这很好用，但是我在屏幕上打开了宽度小于 992px 的 iframe 的元素，因此即使在大屏幕上它们也会有一个巨大的 24px 字体。有没有办法让 max-width 规则遵循屏幕宽度而不是 iframe 宽度？

【问题讨论】：

标签： css iframe responsive-design

【解决方案1】：

用 id 指定你的身体，然后用这个 id 设置样式，如下所示：

<body id="mainBody">
...
</body>
@media (max-width:991px){
    #mainBody{   
        font-size:24px;
    }
}

【讨论】：

谢谢。我的应用程序有一个母版页，它导致所有 iframe 具有相同的。您的回答很有帮助，因为我发现 iframe 以“ms-dialog”类的 html 标签打开。所以我添加了这个规则： html:not(.ms-dialog) > body{ font-size:24px; }
很高兴为您提供帮助 :-)

【解决方案2】：

你可以使用 jquery 来解决这个问题。你可以像这样使用resize函数。

$(window).ready(function(){
    //this will get the default screen width
    var width = $(window).width(); //this will get the width of your screen.
        $("#iframeID").css({"width":width+"px"});

    //this is when you resize the screen
    $(window).resize(function(){
        width = $(this).width(); //this will get the width when you resize the screen.
        $("#iframeID").css({"width":width+"px"});

    });
});

希望它会起作用。

【讨论】：

虽然这可能可行，但我仍然更喜欢仅使用 css 的解决方案。