【发布时间】：2019-11-24 05:05:42
【问题描述】：
我正在使用带有 sass 的引导程序，并尝试让不同的媒体查询发挥作用。由于大多数线程仅与 css 有关，我不确定我的问题出在哪里以及如何正确解决它。 min-width: 1400px 的设置有效，而较小分辨率的设置无效。似乎它们被另一个@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
对于更高的分辨率，它可以按预期工作并显示所需的结果。不幸的是，这种方法无法更改较低的分辨率。
【问题讨论】：
-
请分享您的 HTML。此外，您还可以共享您编译的 CSS。您是否尝试过使用您的开发工具来查看某些内容是否被覆盖或根本没有应用？请阅读：How to create a Minimal, Complete, and Verifiable example
标签： html css sass bootstrap-4