媒体查询不工作

Question

CSS 位于 .scss 文件中，并使用 Gulp 进行了缩小，可以正常工作。我正在测试响应能力 Chrome（调整网页大小）。我已经添加

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML

<div class="container text-center" >
            <h1 class="banner-title">Welcome Refugees</h1>      
</div>

.SCSS

.banner-title {
    margin-top: 275px; 
    font-size: 700%;
}
@media only screen and (min-width: 400px) 
  and (max-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

.banner-title {
    font-size: 500%;
}

}

这是一个常见问题吗？

Answer 1

我在博客上找到了这个 http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

profile-pic {
  float: left;
  width: 250px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}
@media screen and (min-width: 1200px) {
  .profile-pic {
    float: right;
  }
}

Answer 2

我一直在使用 $sm、$md、$lg、$xl 作为 SASS 变量来表示不同的尺寸。

$sm = 600; // @media screen queries don't compile correctly
$sm = 600px; // @media screen queries work as expected

希望这对某人有所帮助

媒体查询不工作

Media Query not working

html

css

frontend

sass

media-queries