CSSメディアクエリーがどのブラウザでも機能しない

これらのメディアクエリーは機能しません。私は間違って何をしていますか？CSSメディアクエリーがどのブラウザでも機能しない

私は<head>でこれを含める：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

はCSS：

/* LESS THAN 75 (LG) */ 
    @media (max-width: 74.9em) { 
      .circle { 
      height: 100px; 
      width: 100px; 
     } 
    } 

    /* LESS THAN 62 (MD) */ 
    @media (max-width: 61.9em) { 
      .circle { 
      height: 100px; 
      width: 100px; 
     } 
    } 

    /* LESS THAN 48 (SM) */ 
    @media (max-width: 47.9em) { 
     .circle { 
      height: 75px; 
      width: 75px; 
     } 
    } 

    /* LESS THAN 34 (XS) */ 
    @media (max-width: 33.9em) { 
     .circle { 
      height: 50px; 
      width: 50px; 
     } 
    } 

.circle { 
    border-radius: 75px; 
    border: 1px solid $accent; 
    display: inline-flex; 
    margin:10px; 


}

HTML：

<div class="row" id="middle-row"> 
    <div class="col-md-10 offset-md-1 flex-xs-middle"> 
     <div id="main-text-container"> 
     <h5 class="display-6">vepo</h5> 
     <h1 class="display-3"> 
      find vegan {{word}} near you. 
     </h1> 
     </div> 
     <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"> 
     <div class="circle" (mouseover)='over("cupcakes")' (mouseleave)='over("stuff")' id="cupcake"> 

     </div> 
     <div class="circle" (mouseover)='over("pancakes")' (mouseleave)='over("stuff")' id="pancake"> 

     </div> 
     <div class="circle" (mouseover)='over("burgers")' (mouseleave)='over("stuff")' id="burger"> 

     </div> 
     <div class="circle" (mouseover)='over("groceries")' (mouseleave)='over("stuff")' id="groceries"> 

     </div> 
     </div> 
     <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div"> 
     <custom-button buttonName="try now" (click)="tryNowClick()"></custom-button> 
     </div> 
    </div> 
</div>

出典

2016-10-01 BeniaminoBaggins

あなたは、HTMLの上部に使用しましたか？ – Hemant

@Hemantありがとう – BeniaminoBaggins

サークルdivが空に見えます。静的コンテンツを使用してみてください。動的コンテンツに関連付けられる前にメディアクエリの効果を確認してください。 – Hemant

あなたは後方にそれをやっています。最小のビューポートで起動し、スタイルを変更します。

これにより、スタイルオーバーライドを最小限に抑えながら、チェックすることができ、より良いCSSフローを実現できます。

例：<！DOCTYPE HTML>を

@media(min-width: 480px) { 

} 

@media(min-width: 767px) { 

} 

@media(min-width: 1024px) { 

}

出典

2016-10-01 06:00:01 developernator

このように動作するようです。私はそれらを全てのメディアクエリの外に '.circle {} 'で上書きしていました – BeniaminoBaggins

CSSメディアクエリーがどのブラウザでも機能しない

答えて

関連する問題