媒体查询难​​题

Question

我已经搜遍了我的问题的答案，我相信它可能是相当基本的。

我现在有一个心理障碍。

我正在调整响应式模板。对于我来说，所有新的领域都有媒体查询内容，但到目前为止它仍然顺利。虽然我无法在不影响平板电脑和桌面页面的情况下将样式应用于一个移动页面，但是当我解决了这个问题时，移动页面都会受到影响。（我确信这使得这一切都非常笨拙）

我的问题实际上是页面上的空白区域，我从中删除了滑块，各种按钮和徽标，我只希望保留在index.htm页面中。 我可以用

<h2 style="margin-top: -250px">

例如，在events.htm中的

这会关闭它，但它会影响平板电脑和桌面尺寸。 所以我尝试在style.css中编辑：

@media only screen and ( max-width: 767px).

添加

.main h2 {margin-top: -250px;}

（包括但已注释掉）

这会影响所有移动页面。

这两页是 http://www.wellbugger.me/index.htm 和 http://www.wellbugger.me/events.htm

帮助会很棒

滚刀

Answer 1

在媒体查询中使用display：none而不是负边距，并且接收此属性的任何元素都将消失。请记住，它也会从dom中消失，所以不要以这种方式或页面内容隐藏标题标签。

Answer 2

我希望您可以将最大宽度和最小宽度一起使用，例如： -

@media only screen and (min-device-width: 400px) and (max-device-width: 480px){
     /*You Css Code*/
    }

因此效果将仅发生在480 - 400之间

所以我认为您的问题可以通过

来解决

@media only screen and (min-device-width: 700px)  and ( max-width: 767px){
   /*You Css Code*/
}

希望我回答你的问题谢谢

Answer 3

我更改了以下内容，似乎解决了这个问题。

删除第209行：

.main { padding-top: 260px !important; margin-top: 0; }

将其替换为第209行：

.main { margin-top-50px; }

现在看来各种各样的断点都能很好地调整。