图像媒体查询

Question

我想在 max-width:1220px 时将 main 转换为 display:column。我正在这样做

@media (max-width: 1220px) {
  .main {
    flex-direction: column;
  }

但是当宽度为 1220px 时图像消失了。我做错了什么？

这是代码笔link更简单。

https://codepen.io/Rvssco/pen/LYzGYgV

提前致谢！

Answer 1

图像正在消失，因为您在 CSS 而不是 html 中包含了图像的 src，flex-direction 在改变方向时无法检测到图像的存在，因此图像没有出现。你可以看看我的代码是怎么做到的。

body {
  background-color: hsl(233, 47%, 7%);
  color: white;
}

h1,
p {
  margin: 0;
}

h1 {
  font-family: "Lexend Deca", sans-serif;
}

.desc {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: hsla(0, 0%, 100%, 0.75);
}

span {
  color: hsl(277, 64%, 61%);
}

.wrap {
  height: 98vh;
  width: 98vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  display: flex;
  width: 85%;
  height: 80%uto;
  border-radius: 10px;
  background-color: hsl(244, 38%, 16%);
  flex-direction: row;
}

.left {
  padding: 5rem;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  width: 50%;
}

.text-container .title {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.desc {
  margin-bottom: 5rem;
  line-height: 1.5rem;
  word-spacing: 0.3rem;
  font-family: "Inter", sans-serif;
}

.stats-desc {
  font-family: "Inter", sans-serif;
  color: hsla(0, 0%, 100%, 0.6);
}

.stats-container {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  width: 70%;
}

.right {
  width: 50%;
  /* background-image: url(./1.png); */
  background-size: cover;
  background-repeat: no-repeat;
}

.stats h1 {
  font-family: "Inter", sans-serif;
}

.filter {
  height: 100%;
  width: 100%;
  background-color: hsla(277, 88%, 32%, 0.603);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}



  .left {
    text-align: center;
  }


@media (max-width: 1000px) {
  .main {
    /* display: block; */  /* Option 2*/
    flex-direction: column-reverse;
    background-color:red;  /*Used for testing please remove*/
  }

  .left {
    text-align: center;
  }

/*Small modification in filer and right classes*/
  .filter {
  height: 100%;
  width: 100%;
  background-color: hsla(277, 88%, 32%, 0.603);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

  .right {
  height: 50%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
}

<div class="wrap">
      <div class="main" role="main" >
        <div class="left">
          <div class="text-container">
            <h1 class="title">
              Get <span>insights</span> that help your business grow.
            </h1>
          </div>
          <p class="desc">
            Discover the benefits of data analytics and make better decisions
            regarding revenue, customer experience, and overall efficiency.
          </p>
          <div class="stats-container">
            <div class="stats">
              <h1>10k+</h1>
              <p class="stats-desc">COMPANIES</p>
            </div>
            <div class="stats">
              <h1>314</h1>
              <p class="stats-desc">TEMPLATES</p>
            </div>
            <div class="stats">
              <h1>12M+</h1>
              <p class="stats-desc">QUERIES</p>
            </div>
          </div>
        </div>
        <div class="right">
            <img  class="filter" src= ./1.png>
        </div>
      </div>
    </div>

我不知道这背后的确切原因，可能有更高知识的人可以发表评论。

如果您仍想使用 CSS 中的 url，您仍然可以使用它，但需要更改

flex-direction:column

做

diplay:block

其次，当你使用媒体查询时，你需要重新定义用于图像及其显示的类（.filter和.right）。否则更改将不会应用到它们，这是我观察到的一个明显的错误。

此外，您已经重新定义了两次媒体查询，并且 CSS 在使用 {} 括号时存在错误。

图像媒体查询

Media query on image

html

css

image

media-queries