我正在使用CSS @media标签和max-width。要求是在大屏幕上具有较小的文本大小，并且在移动屏幕上具有较大的文本大小。所以在基本层面我有：
body {
font-size: 13px;
}
@media (max-width:991px){
body{
font-size:24px;
}
}
这工作正常，但我在屏幕上有元素在屏幕上打开宽度小于992px的iframe，因此即使在大屏幕上也会有一个巨大的24px字体。有没有办法让最大宽度规则遵循屏幕宽度而不是iframe宽度？
特定你的身体带有一个id然后通过这个id样式，如下所示：
<body id="mainBody">
...
</body>
@media (max-width:991px){
#mainBody{
font-size:24px;
}
}
你可以使用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"});
});
});
希望它会奏效。