我在这里阅读了很多“@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/