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

希望这对某人有帮助

媒体查询不起作用

2 个答案: