CSS Media Query仅适用于浏览器调整大小（Edge）

时间：2017-06-27 15:53:19

标签： html css css3 flexbox microsoft-edge

我有一个网站kryptobank.co.uk，它使用媒体查询来提供响应能力。它有点像新闻文章网站。甚至没有开发，只是有假数据和写作。该设计在边缘浏览器上完美运行。当我调整窗口大小时，我可以看到弹性框属性生效。但是，这是它唯一可用的浏览器。当我在桌面上调整Chrome的大小或在手机上使用三星浏览器时，它无法正常工作。它应用媒体查询属性，即使大小甚至达不到我设置的769px。我只有一个名为index.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>

您可以自己查看网站。

2 个答案:

答案 0 :(得分：1)

它在我的Chrome浏览器上调整大小，但是在设备上，我认为您需要添加一个视口元标记，以便网站知道正在查看的设备于：

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

答案 1 :(得分：0)

自6月27日起在Chrome中使用。尝试添加

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

可以找到指南here

相关问题
最新问题