Media Query not working

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