gpt4 book ai didi

css - @media 不工作

转载 作者:太空宇宙 更新时间:2023-11-04 12:11:10 25 4
gpt4 key购买 nike

我在这里阅读了很多“@media 不工作”的问题。不幸的是,他们中的大多数似乎都没有答案——或者答案并不能解决问题。祈祷这次不会发生!

这是我的代码:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (min-width: 801px) {
.smallmobile {
display: hidden !important;
}
.mobileonly, .bigmobile {
display: hidden !important;
}
}
@media screen and (max-width: 800px) {
font-family: Roboto, Noto, sans-serif;
.notformobile {
display: hidden;
}
}
@media screen and (min-width: 480px) and (max-width: 800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops */
.smallmobile {
display: hidden;
}
}
@media screen and (max-width: 479px) {
/* Target portrait smartphones */
.bigmobile {
display: hidden;
}
}
</style>
</head>
<body>
Everyone can see this<br /><br />
There should be nothing below this line except on small mobiles:<br />
<span class="smallmobile"><a href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a></span><br /><br />
<div class="smallmobile"><a href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a></div><br /><br />
<a class="smallmobile" href="tel:+441234456789">Phone us on 01234 456789 to discuss your requirements</a>
</body>
</html>

我认为很明显什么是/不应该发生的。

为什么它不起作用?

[我已经在 Chrome 和 Firefox 上试过了。它对任何一个都不起作用。]

最佳答案

对于每个屏幕宽度,您都有 display: hidden,这意味着如果它有效,您将不会看到任何宽度的任何内容。此外,display: hidden 是无效的 CSS 规则。它应该是 display: none

要修复它制定第一条规则

@media screen and (min-width: 801px) {
.smallmobile {
display: none !important;
}
}

第二个

@media screen and (min-width: 480px) and (max-width: 800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops */
.smallmobile {
display: block;
}
}

关于css - @media 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29039146/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com