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

.small_only { 
 
    display: block; 
 
} 
 

 
.large_only { 
 
    display: none; 
 
} 
 

 

 
/* === Media Queries === */ 
 

 
// Extra large devices (large desktops, 1200px and up) 
 
@media (min-width: 1200px) { 
 
    .small_only { 
 
    display: none; 
 
    } 
 
    .large_only { 
 
    display: block; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-12 col-xs-12"> 
 
     <div class="small_only"> 
 
     <h1>SMALL</h1> 
 
     </div> 
 
     <div class="large_only"> 
 
     <h1>This should only be visible in large windows</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

问题：输出仅包含字“SMALL”无论屏幕有多宽。

我觉得我失去了一些明显的东西，但对于我的生活，我无法弄清楚它是什么。

来源

2017-02-16 Somenath Sinha

不要使用//在CSS的意见..

使用/*..*/

http://www.codeply.com/go/uMSHCzymw3

.small_only { 
    display: block; 
} 
.large_only { 
    display: none; 
} 

/* === Media Queries === */ 
/* Extra large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 
    .small_only { 
     display: none; 
    } 
    .large_only { 
     display: block; 
    } 
}

编辑

Codeply的CSS编译其中使用ACE编辑器捡起来..

来源

2017-02-16 15:32:24 ZimSystem

谢谢。我将复制的代码粘贴到bootstrap网站上的HTML模板中，并将其忘了。吮吸没有一个CSS编译器来捕捉那样的愚蠢错误。 –

很高兴工作！请接受答案，以便其他人知道已解决。 – ZimSystem

完成。我正在等倒数，直到我能接受答案。再一次，谢谢你。 –

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

回答

相关问题