CSSメディアクエリはブラウザのサイズ変更（エッジ）でのみ動作します

私は、応答性のためにメディアクエリを使用するウェブサイトkryptobank.co.ukを持っています。ニュース記事のようなものです。まだ開発されておらず、ちょうど偽のデータと書き込みを持っています。デザインは、エッジブラウザで完全に正常に動作します。ウィンドウのサイズを変更すると、フレックスボックスのプロパティが有効になります。しかし、それはそれが動作する唯一のブラウザです。デスクトップでChromeのサイズを変更するか、携帯電話でSamsungのブラウザを使用すると機能しません。サイズが769pxに達していない場合でも、メディアクエリのプロパティが適用されます。 index.cssというCSSスタイルシートが1つしかありません。それは混乱だが、これはそれがCSSメディアクエリはブラウザのサイズ変更（エッジ）でのみ動作します

/* ================================= 
    Base Layout Styles 
==================================== */ 

/* ---- Navigation ---- */ 
.main-header { 
    background-color: #fff; 
    margin: 0 auto; 
} 
.name, .main-nav { 
     text-align: center; 
} 

.name { 
    text-shadow: 1px 2px rgba(0,0,0,0.8) 
} 
ul li { 
    list-style-type: none; 
} 


/* ---- Layout Containers ---- */ 
.price-card{ 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
    border: 1px solid black; 
    width: 300px; 
    padding: 20px; 
    margin: auto; 
    border-radius: 10px; 
    margin-top: 20px; 

} 

.price-card p { 
    margin-top: -15px; 
    font-size: 10px; 
} 
.price-card span{ 
    font-size: 20px; 
    font-weight: bold; 
    margin-bottom: -15px; 
} 
.container{ 
    display: flex; 
    flex-wrap: wrap; 
    flex-basis: 300px; 
} 

.intro-heading{ 
    text-align: left; 
    border-bottom: 2px solid #000; 
    margin-bottom: 5px; 
} 
.price { 
    width: 80%; 
    margin: 0 auto; 
} 
.top-three { 
    text-align: left; 
    margin: 0; 
} 

.title h1, 
.title span, 
.title a{ 
    color: white; 
    background-color: #000000; 
    display: inline; 
} 

.list h1, 
.list span { 
    color: #000; 
    background-color: #fff; 
    display: inline; 
} 
.primary{ 
    height: 390px; 
    width: 99%; 
    margin: 7px auto; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    border-top: 10px solid firebrick; 
} 

.list{ 
    height: 390px; 
    width: 99%; 
    margin: 7px auto; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    margin: 5px 5px; 
    border-top: 10px solid firebrick; 
} 

.back-image{ 
    height: 390px; 
    width: 100%; 
    margin: 7px auto; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    border-top: 10px solid #ffa949; 
} 
.back-image h1, 
.back-image span { 
    color: #000; 
    background-color: #fff; 
    display: inline; 
} 
.content{ 
    width: 80%; 
    margin: 10px auto; 
    max-width: 900px; 

} 
.content p { 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 24px; 
     font-weight: 500; 
} 

h2 span { 
    font-size: 12px; 
} 
/* ---- Page Elements ---- */ 

a:link { 
    /* Applies to all unvisited links */ 
    text-decoration: none; 
    font-weight:  bold; 
    } 
a:visited { 
    /* Applies to all visited links */ 
    text-decoration: none; 
    font-weight:  bold; 
    } 
a:hover { 
    /* Applies to links under the pointer */ 
    text-decoration: underline; 
    font-weight:  bold; 

    } 
a:active { 
    /* Applies to activated links */ 
    text-decoration: underline; 
    font-weight:  bold; 

    } 


/* ================================= 
    Flexbox 
==================================== */ 


@media only screen and (min-width: 769px){ 
    .top-three { 
     display: flex; 
     flex-direction: row; 
    } 

    .name, .main-nav { 
     text-align: center; 
    } 
    ul li { 
     display: inline; 
     background-color: #000; 
     margin-right: 15px; 
    } 
    li a { 
     color: #fff; 
    } 

    .latest-10, 
    .all{ 
     display: flex; 
     flex-wrap: wrap; 
    } 

    .list{ 
     flex-grow: 1; 
     flex-basis: 300px; 
    } 

}

をどのように見えるかであり、これはHTMLページ

<body> 
      <header> 
       <h1 class="name"><a href="/">KYPTOBANK</a></h1> 
       <ul class="main-nav"> 
        <li><a href="/">01 - HOME</a></li> 
        <li><a href="/articles/">02 - NEWS</a></li> 
        <li><a href="#">03 - CURRENCY EXCHNAGE</a></li> 
        <li><a href="#">04 - ABOUT</a></li> 
       <li><a href="#">05 - CONTACT</a></li> 
       </ul> 
      </header><!--/.main-header--> 

      <div id="root"></div> 

    <h2 class="intro-heading">Top Three</h2> 
    <div class="top-three"> 

     <div class="primary" style="background-image:url(http://themarketmogul.com/wp-content/uploads/2017/06/india_money_1498129850.jpg)"> 
     <div class="title"> 
      <h1> <a href="/articles/1/">How India&#39;s Demonstartion has change Paytm&#39;s Fortunes</a></h1> 
      <br> 
      <span>Emerging Economy</span> 
     </div> 
     </div> 

     <div class="primary" style="background-image:url(http://themarketmogul.com/wp-content/uploads/2017/06/pexels-photo-136721.jpeg)"> 
     <div class="title"> 
      <h1> <a href="/articles/2/">Hear The Drums Echoing Tonight? The Relentless March Of Online Money Transfers In Africa</a></h1> 
      <br> 
      <span>Africa Emerging</span> 
     </div> 
     </div> 

     <div class="primary" style="background-image:url(http://themarketmogul.com/wp-content/uploads/2017/06/trading_1498053453.jpg)"> 
     <div class="title"> 
      <h1> <a href="/articles/3/">Raise The Stakes: Learn How To Improve The Win/Loss Ratio</a></h1> 
      <br> 
      <span>London Rising</span> 
     </div> 
     </div> 

    </div> 

    <h2 class="intro-heading">Latest Articles</h2> 
     <div class="latest-10"> 

     <div class="list" style="background-image:linear-gradient(#ffa949, transparent 90%),linear-gradient(to top, #fff, transparent),url(https://media.coindesk.com/uploads/2017/06/shutterstock_307175279.jpg);"> 
     <h1> <a href="/articles/4/">GDAX Exchange to Reimburse Traders After Ether Flash Crash</a></h1> 
      <br> 
     <span>Market Collapse</span> 
     </div> 

     <div class="list" style="background-image:linear-gradient(#ffa949, transparent 90%),linear-gradient(to top, #fff, transparent),url(https://media.coindesk.com/uploads/2017/06/shutterstock_307175279.jpg);"> 
     <h1> <a href="/articles/5/">GDAX Exchange to Reimburse Traders After Ether Flash Crash</a></h1> 
      <br> 
     <span>Market Collapse</span> 
     </div> 

     <div class="list" style="background-image:linear-gradient(#ffa949, transparent 90%),linear-gradient(to top, #fff, transparent),url(https://media.coindesk.com/uploads/2017/06/shutterstock_307175279.jpg);"> 
     <h1> <a href="/articles/6/">GDAX Exchange to Reimburse Traders After Ether Flash Crash</a></h1> 
      <br> 
     <span>Market Collapse</span> 
     </div> 

     <div class="list" style="background-image:linear-gradient(#ffa949, transparent 90%),linear-gradient(to top, #fff, transparent),url(https://media.coindesk.com/uploads/2017/06/shutterstock_307175279.jpg);"> 
     <h1> <a href="/articles/7/">GDAX Exchange to Reimburse Traders After Ether Flash Crash</a></h1> 
      <br> 
     <span>Market Collapse</span> 
     </div> 

     <div class="list" style="background-image:linear-gradient(#ffa949, transparent 90%),linear-gradient(to top, #fff, transparent),url(https://media.coindesk.com/uploads/2017/06/shutterstock_307175279.jpg);"> 
     <h1> <a href="/articles/8/">GDAX Exchange to Reimburse Traders After Ether Flash Crash</a></h1> 
      <br> 
     <span>Market Collapse</span> 
     </div> 

     <div class="list" style="background-image:linear-gradient(#ffa949, transparent 90%),linear-gradient(to top, #fff, transparent),url(https://media.coindesk.com/uploads/2017/06/shutterstock_307175279.jpg);"> 
     <h1> <a href="/articles/9/">GDAX Exchange to Reimburse Traders After Ether Flash Crash</a></h1> 
      <br> 
     <span>Market Collapse</span> 
     </div> 

    </div>

あなた自身のためのウェブサイトを閲覧することができます。

出典

2017-06-27 electro7912

hereを見つけることができます追加してみてください？私は '悪い要求を得る400： – MegaTron

これは正しいURLです – electro7912

あなたが間違って書いていない限り、それは今すぐに私のためにうまくいきます。ウェブサイトは10％のようなものなので、400または500のエラーなどがあります。 – electro7912

しかし、デバイス上で、私はあなたがサイトは、それが上で表示されているのデバイスを認識しているように、ビューポートメタタグを追加する必要があると思う、私のChromeブラウザに罰金リサイズだ：

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

出典

2017-06-27 16:07:29 MegaTron

17/6/27時点のChromeで動作します。正しいURLということです

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

ガイドが

出典

2017-06-27 16:49:13 InvincibleM

CSSメディアクエリはブラウザのサイズ変更（エッジ）でのみ動作します

答えて

関連する問題