针对响应性设计的CSS媒体查询在SASS中不起作用

在我的CSS SASS文件中使用mobile first设计。定义媒体查询后，不同设备的高度不会改变。此外，该卡位于iframe内。它在平板电脑上运行良好，但在手机和台式机上运行不正常

&.content{ flex-flow: row nowrap; height:166px; } @media screen and (min-width: 541px) { &.content { height: 150px; } } } &.内容{ flex-flow：行nowrap； 高度：166px； } @媒体屏幕和屏幕（最小宽度：541px）{ &.内容{ 高度：150像素； } } } HTML标记

---

在看不到其余SCS的情况下，您可以将

媒体查询嵌套在第一条规则中：

&.content {
   flex-flow: row nowrap;
   height:166px;
   
    @media screen and (min-width: 541px) {
       height: 150px;
    }
}

请注意，如果要设置出现在
iframe
中的元素的样式，则
iframe
决定
min
和
max
宽度，而不是主文档窗口。因此，如果您的
iframe
仅为
300px
宽，则不会满足该媒体查询条件

编辑：

要了解
iframe
的宽度，可以将以下JS添加到加载的内容中：

<script>
function alertSize() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    myWidth = window.innerWidth;
  }
  window.alert( 'Width = ' + myWidth );
}

alertSize();
</script>


函数alertSize（）{
var myWidth=0；
if（typeof（window.innerWidth）=“number”）{
myWidth=window.innerWidth；
}
window.alert（'Width='+myWidth）；
}
alertSize（）；

这将提醒您
iframe
的宽度。从这里，您可以根据返回的宽度调整媒体查询。这更像是一个调试工具，而不是一个自动选择正确媒体查询的解决方案。
为我们展示本文的整个CSS。您可能会遇到问题，因为您在媒体查询中使用了
&
，而没有首先选择媒体查询中的父元素。是否有一种解决方法可以在iframe中为媒体查询获取正确的维度。另外，如何获得iframe尺寸？