Question

我有两节课：

.show{display:block; visibility: visible;}
.hide{display:hidden; visibility: hidden;}

我的困境是当屏幕宽度大于768px时，Media查询会在某个元素上有效地生成.hide，该元素将会消失。这是我的期望。但是当屏幕宽度小于768px时，Mediq查询会在某些内嵌块元素上有效地生成.show，并且存在问题。因为disable:block类的.show修改了元素的模型框。

简单说明：

<span></span><span></span><span></span><span></span>

添加.show将被启用：

<span></span>
<span></span>
<span></span>
<span></span>

当我希望元素可见时，如何避免更改模型框？

更新：我有一个答案尚未测试。

.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}

Answer 1

我会选择内联元素

.show {display:inline;}
.hide {display:none;}

或仅限CSS3 .show {display:initial;}

另一种选择是围绕你的元素进行编码，但它会变得混乱

.hide {display:none;}
.show {display:inline;}
a.show, span.show, ...etc {display:inline;}
td.show {display:table-cell;}

你可以看到它的发展方向。

您最好只删除.hide课程，而不是添加.show课程。只需删除hide类或调整媒体查询，该元素就应该恢复到自然状态。

当你提到媒体查询时，

更新，或许这更像是你所追求的一个例子：

@media screen and (max-width: 50em) {
    .hideNarrow {display:none;}    
}

<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>

在这里播放，您可以在其中滑动页面宽度：http://jsfiddle.net/of2yc9nu/2/

Answer 2

不仅display可以实现它。您可以使用visibility height。像这样：

.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}

Answer 3

尝试：

.show {
   display: inherit;
}

Answer 4

试试这个

.hide {
  display: none;
}
.show {
  display: inline-block;
}

<span class="show">1</span>
<span class="hide">2</span>
<span class="show">3</span>
<span class="hide">4</span>
<span class="show">5</span>

Answer 5

.show{
    visibility : visible;
    height: auto;
}
.hide{
    visibility : hidden;
    height: 0;
}

<span class="show">Span1</span>
<span class="show">Span2</span>
<span class="hide">Span3</span>

<div class="show">div1</div>
<div class="show">div2</div>

这样可行。

如何正确隐藏或显示页面元素（使用纯CSS的媒体查询）？

5 个答案: