html - CSS 媒体查询仅适用于浏览器调整大小 (Edge)

标签 html css flexbox microsoft-edge

我有一个网站 kryptobank.co.uk，它使用媒体查询来实现响应。这有点像新闻文章网站。甚至还没有开发，只有假数据和文字。该设计在边缘浏览器上运行良好。当我调整窗口大小时，我可以看到 flexbox 属性生效。但是，这是它唯一适用的浏览器。当我在桌面上调整 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>

您可以自己查看该网站。

最佳答案

它在我的 chrome 浏览器上可以很好地调整大小，但是在设备上，我认为您需要添加一个视口(viewport)元标记，以便该站点知道正在查看它的设备:

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

关于html - CSS 媒体查询仅适用于浏览器调整大小 (Edge)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44784784/

上一篇：javascript - 使用 AngularJS 通过数组序列激活 CSS 类

下一篇：HTML 段落文本导致图像在重新调整窗口大小时缩放

相关文章：

jquery - 除了first和second怎么选LI？

html - HTML/CSS 中的定位/解析问题，以及向页面添加图像

html - 如何通过编辑html代码防止文件被盗？

html - 灵活响应移动

html - nth-child 具有不同宽度的 CSS 网格布局

javascript - Adobe CEP 扩展(indesign) : Is it possible to call "js" function from "jsx"?

html - 选择 float 时损坏的元素

css - 在 IE8 的 TD 中嵌入表格中的垂直对齐图像

css - 电子邮件中的格式或样式字符串

css - 如何在 md-toolbar 中定位 md-toolbar-row 元素

©2024 IT工具网  联系我们