媒体查询不起作用 [英] Media Query not working

问题描述

CSS位于.scss文件中，并且通过Gulp进行了最小化，该版本可以正常工作.我正在测试响应速度是Chrome(调整网页大小).我已添加

The CSS is in a .scss file and being minified with Gulp which works without any issues. I'm testing the responsiveness is Chrome(resizing the webpage). I have added

<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%;
}

}

这是常见问题吗?

推荐答案

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

i found this on a blog 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;
  }
}

这篇关于媒体查询不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！