Question

我正在使用sass引导程序，并尝试使不同的媒体查询正常工作。由于大多数线程仅与CSS有关，因此我不确定问题出在哪里以及如何正确解决它。最小宽度：1400像素的设置有效，而较小分辨率的设置无效。似乎它们已被其他@ media-query覆盖。如何避免这种情况？

我将Angular与Bootstrap4和SASS结合使用。我正在使用的引导程序类是容器流体。为了使我的网站对不同的设备响应，我试图使用@ media-queries使我的布局对于不同的设备保持一致。我/现在也在使用引导程序类“ col-md ...”等来使布局响应。

由于SASS不允许使用{}和分号之类的括号，因此，如果我用自己的方法重写某些内容，我不确定。

@import '../../sass/var'

@media (min-width: 1351px)
 .upper
   margin-left: 290px
 .welcome
   font-family: $font
   color: $white
   font-size: 30px
@media (max-width: 1350px)
 .upper
  margin-left: 100px
 .welcome
  font-family: $font
  color: $white

对于更高的分辨率，它可以按预期工作并显示所需的结果。不幸的是，这种方法无法更改较低的分辨率。

Answer 1

您已违反了底部代码块的某些缩进规则。像在顶层代码中一样，请确保在嵌套时设置正确的缩进。

对不同的屏幕尺寸使用@media查询无法正常工作

1 个答案: