当媒体查询激活时，为什么内容会消失？

发布于 2025-02-04 15:24:39 字数 1706 浏览 4 评论 0原文

我正在为响应式网站创建基本HTML模板，媒体查询有效，但与该屏幕大小相关的内容消失了。

这是我的代码：

html,
* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  color: white;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: black;
  border: red dotted 3px;
}

.mobile,
.tablet {
  display: none;
}

div {
  display: grid;
  border: dotted 1px yellow;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 768px) {
  body {
    background-color: rebeccapurple;
    overflow: hidden;
  }
  .regular,
  .tablet {
    display: none;
  }
}


/* 769px — 1024px: Small screens, laptops */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: royalblue;
    overflow: hidden;
  }
  .regular,
  .mobile {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Boots</title>
</head>

<body>
  <div>
    <div class="regular">
      <h1>Regular</h1>
    </div>
    <div class="mobile">
      <h1>Mobile</h1>
    </div>
    <div class="tablet">
      <h1>Tablet</h1>
    </div>
  </div>
</body>

</html>

当屏幕尺寸达到介质查询的激活大小时，它确实有效（背景颜色更改），但是，该特定媒体查询大小的内容消失了。为什么会发生这种情况，以及如何解决此问题以确保当媒体查询激活时，请显示正确的内容div？

原文

I'm creating a base HTML template for a responsive website, the media query works, but the content related to that screen size disappears.

This is my code:

html,
* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  color: white;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: black;
  border: red dotted 3px;
}

.mobile,
.tablet {
  display: none;
}

div {
  display: grid;
  border: dotted 1px yellow;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 768px) {
  body {
    background-color: rebeccapurple;
    overflow: hidden;
  }
  .regular,
  .tablet {
    display: none;
  }
}


/* 769px — 1024px: Small screens, laptops */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: royalblue;
    overflow: hidden;
  }
  .regular,
  .mobile {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Boots</title>
</head>

<body>
  <div>
    <div class="regular">
      <h1>Regular</h1>
    </div>
    <div class="mobile">
      <h1>Mobile</h1>
    </div>
    <div class="tablet">
      <h1>Tablet</h1>
    </div>
  </div>
</body>

</html>

When the screen size gets to the activation size of the media query, it does work (the background color changes), however, the content for that specific media query size disappears.
Why does this happen and how do I fix this to make sure that when the media query activates, the correct content div displays?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

单身情人 2025-02-11 15:24:39

这是因为您没有将Div设置为在媒体查询中可见，因此仅隐藏新的DIV并改变身体颜色。这意味着您最终会出现。regular，.mobile和.tablet asce 全部隐藏，并且没有显示它们。

在每个媒体查询中，您都需要添加：

.mobile {display: block;}

或者

.tablet {display: block;}

这应该有效：

html,
* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  color: white;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: black;
  border: red dotted 3px;
}

.mobile,
.tablet {
  display: none;
}

div {
  display: grid;
  border: dotted 1px yellow;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 768px) {
  body {
    background-color: rebeccapurple;
    overflow: hidden;
  }

  .mobile {
    display: block;
  }

  .regular,
  .tablet {
    display: none;
  }
}


/* 769px — 1024px: Small screens, laptops */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: royalblue;
    overflow: hidden;
  }
  
  .tablet {
    display: block;
  }

  .regular,
  .mobile {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Boots</title>
</head>

<body>
  <div>
    <div class="regular">
      <h1>Regular</h1>
    </div>
    <div class="mobile">
      <h1>Mobile</h1>
    </div>
    <div class="tablet">
      <h1>Tablet</h1>
    </div>
  </div>
</body>

</html>

It's because you aren't setting your divs to be visible in the media query so it's only hiding new ones and changing the body color. Which means you're ending up with .regular, .mobile, and .tablet all hidden and none of them displaying.

In each media query you need to add:

.mobile {display: block;}

.tablet {display: block;}

This should work:

html,
* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  color: white;
}

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: black;
  border: red dotted 3px;
}

.mobile,
.tablet {
  display: none;
}

div {
  display: grid;
  border: dotted 1px yellow;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 768px) {
  body {
    background-color: rebeccapurple;
    overflow: hidden;
  }

  .mobile {
    display: block;
  }

  .regular,
  .tablet {
    display: none;
  }
}


/* 769px — 1024px: Small screens, laptops */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: royalblue;
    overflow: hidden;
  }
  
  .tablet {
    display: block;
  }

  .regular,
  .mobile {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Boots</title>
</head>

<body>
  <div>
    <div class="regular">
      <h1>Regular</h1>
    </div>
    <div class="mobile">
      <h1>Mobile</h1>
    </div>
    <div class="tablet">
      <h1>Tablet</h1>
    </div>
  </div>
</body>

</html>

回复收藏 0 原文

~没有更多了~