Question

我觉得我会在一秒钟内感到非常愚蠢，但我不能为我的生活弄清楚我的媒体查询有什么问题。我正在使用Adobe的Brackets作为我的代码编辑器，最初认为程序中存在一个小故障。但后来我在jsFiddle中测试了代码并且它也没有在那里工作，所以我必须用代码来捏造一些东西。

有人能看出什么问题吗？

这是我的jsFiddle

HTML

<div class="helpful">

<span class="thumb">Did you find this helpful?</span>
<span class="readers">82 Readers found this helpful</span>

</div>

CSS

.helpful .readers {
    color: #35cb1a;
    font-size: .9em;
}

.helpful .thumb {
    float: right;
    color: #7b7b7b;
    font-size: .9em;
}

@media screen and (max-width: 1020px) {

    .helpful .readers,
    .helpful .thumb {
        display: block;
        margin: auto;
     }
 }

Answer 1

对于没有指定宽度的元素，

DBTYPE_DBTIME无效，因为blocks with auto width stretch to the full width of their container leaving no room for margins。

此外，自动边距对浮动元素和a floated element is display: block by definition没有影响。

因此，您的媒体查询功能正常，但其中的样式对指定的布局没有任何明显影响。

如果您希望浮动元素在1020px和更窄处停止浮动，则需要覆盖display: block; margin: auto声明。
如果您希望文本居中，请使用float代替text-align: center。
如果您希望两个元素垂直堆叠，请保留margin: auto声明。

Putting it all together：

display: block

Answer 2

你的代码完全没问题，因为你想在1020px宽度后对齐那些div并为此你已经使用了这个css

@media screen and (max-width: 1020px) {

    .helpful .readers,
    .helpful .thumb {
        display: block;
        margin: auto;
     }
 }

但如果您使用width，则始终需要提及margin:auto。

我假设宽度为200px所以css应该是这样的

@media screen and (max-width: 1020px) {

    .helpful .readers,
    .helpful .thumb {
        display: block;
        margin: auto;
        widht:200px;
     }
 }

在这个小提琴中工作正常https://jsfiddle.net/vgrtety9/3/

为什么此媒体查询不起作用？

2 个答案: