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

时间:2016-03-30 17:35:38

标签: css media-queries

我觉得我会在一秒钟内感到非常愚蠢,但我不能为我的生活弄清楚我的媒体查询有什么问题。我正在使用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;
     }
 }

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

你的代码完全没问题,因为你想在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/