CSS媒體查詢只適用於瀏覽器調整大小（邊緣）

我有一個網站kryptobank.co.uk使用媒體查詢響應。這有點像新聞報道網站。還沒有開發，只是有假的數據和寫作。該設計在邊緣瀏覽器上運行得非常好。當我調整窗口大小時，我可以看到彈性框屬性生效。但是，這是它唯一的瀏覽器。當我在桌面上調整Chrome大小或在手機上使用三星瀏覽器時，它不起作用。它應用媒體查詢屬性，即使大小還沒有達到我設定的769px。我只有一個名爲index.css的css樣式表。這是一個爛攤子，但是，這是它的外觀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

是正確的網址是什麼？我得到一個'不好的請求400： – MegaTron

是的，這是正確的網址 – electro7912

它現在對我來說很好，除非你寫錯了。該網站就像完成了10％，因此可能會有400或500個錯誤等。 – electro7912

它調整罰款我的Chrome瀏覽器，但是一個設備，我想你會需要添加視口元標記，使該網站是知道設備的它被上觀看的：

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

來源

2017-06-27 16:07:29 MegaTron

2012年6月27日在Chrome中運行。嘗試添加

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

指導可以發現here

來源

2017-06-27 16:49:13 InvincibleM

CSS媒體查詢只適用於瀏覽器調整大小（邊緣）

回答

相關問題