Question

我在这里读了很多“@media not working”的问题。不幸的是，他们中的大多数似乎没有答案 - 或者答案没有解决问题。保持我的手指交叉，这次不会发生！

这是我的代码：

<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上尝试过它。它对两者都不起作用。]

Answer 1

对于每个屏幕宽度，您有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;
 }
}

Answer 2

@media screen and (min-width: 801px) {
.smallmobile {
 display: none !important;
 }
.mobileonly, .bigmobile {
 display: none !important;
 }
}
@media screen and (max-width: 800px) {
 font-family: Roboto, Noto, sans-serif;
.notformobile {
 display: none ;
 }
}
@media screen and (min-width: 480px) and (max-width: 800px) {
 /* Target landscape smartphones, portrait tablets, narrow desktops */
 .smallmobile {
 display: none ;
 }
}
@media screen and (max-width: 479px) {
 /* Target portrait smartphones */
 .bigmobile {
 display: none;
 }
}

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>

每个浏览器都不支持can i use。

并且显示隐藏不正确使用无

@media不工作

2 个答案: