英文:
I'm having trouble with displaying a div when I want it to and hiding it when I want it to he hidden
问题
line 43 id="eight" 是一个 div，我想在屏幕宽度小于 900 像素时隐藏它，在屏幕宽度大于 900 像素时显示它。我在第 96 行使用了 "display: none"，但似乎在屏幕宽度大于 900 像素时也隐藏了它，这不是我想要的。
这是 GitHub 的链接。
英文:
line 43 id="eight" is a div that I want to hide when the screen size is below 900px and display when the screen size is above 900px I've used "display: none" line 96 but that seems to hide it when the screen size is bigger than 900px also which is not what I want
here is the link to the GitHub
答案1
得分: 1
你是在反过来做，你可以在这里阅读更多相关信息。然而，这里有一个简要描述：
@media(min-width:900px) {
这是你如何使用它的方式，应该在显示屏宽度超过900px时应用样式。请像这样操作，将min-width:900px下的显示更改为除display: none之外的其他样式，例如：
#eight{
grid-area: newItem2;
display: flex;
}
但不要在其中包含display: none，一切都应该正常。逻辑是，当窗口宽度大于900px时，设置一个激活的样式来显示某些内容，而在媒体查询之前的CSS中，对小于该宽度的一切都进行样式设置。@media(min-width:900px) {会覆盖它之前的CSS，但如果你没有覆盖任何东西，它将保留在媒体查询之前给定的CSS样式。
英文:
You are doing it the other way around, you can read more about it here.
however, here is a brief description
@media(min-width:900px) {
this is how you are using it and you are supposed to put styles that should be active when the display is over 900px.
Do it like this, change your display under min-width:900px to be something other than display: none, for example:
#eight{
grid-area: newItem2;
display: flex;
}
but keep display: none out of this and everything should be fine.
the logic is that you set a style that is active when the width of the window is > 900px to display something, and in your CSS before it, you style everything that is under that width. @media(min-width:900px) {overrides CSS that is before it, but if you do not override anything it will keep the CSS style you have given it before media query.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论