Question

我正在使用CSS @media标签和max-width。要求是在大屏幕上具有较小的文本大小，并且在移动屏幕上具有较大的文本大小。所以在基本层面上我有：

body {
    font-size: 13px;
 }

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

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

Answer 1

使用id识别您的身体然后通过此ID设置样式：

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

Answer 2

您可以使用jquery来解决该问题。您可以像这样使用调整大小功能。

$(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：iframe内的最小宽度响应

2 个答案: