Question

我是@media查询的新手，当我的Joomla页面无法在手机和平板电脑上正确显示时，我只能使用它。我已经阅读了尽可能多的内容，但仍然存在桌面背景和不会在平板电脑和移动设备上显示的标题图片的问题。我的理解是，在css代码中设置了参数，用于显示网站外观的差异宽度。我已经完成了我的代码（数千次），并尝试通过向img代码添加可见性：可见声明，在平板电脑和移动设备上显示图像：像这样 img { 能见度：可见; 宽度：自动; 身高：自动; 最大宽度：90％; } 它没有什么区别

我想知道的是这部分我不明白是否与@media（max-width：480px）之前的代码集有关，导致图像无法显示。这段代码： @media（min-width：768px）和（max-width：979px）{

.hidden-desktop {
    display: inherit !important;
}
.visible-desktop {
    display: none !important;
}
.visible-tablet {
    display: inherit !important;
}
.hidden-tablet {
    display: none !important;
}
}

@media (max-width: 767px) {
.hidden-desktop {
    display: inherit !important;
}
.visible-desktop {
    display: none !important;
}
.visible-phone {
    display: inherit !important;
}
.hidden-phone {
    display: none !important;
}
}

有人可以帮助我理解我可以改变的内容......我想要隐藏在移动设备或平板电脑上的任何内容，而不是重新调整图像大小而不是显示。

Answer 1

我曾经遇到过这种情况，尽管@media（max-width：767px）在技术上应该可行。

@media screen和（max-width：767px）可能是一种解决方法，它总是适用于我。

并确保您的html页面标题中包含此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

@media隐藏和可见移动＆amp;桌面

1 个答案: