@media无法正常工作

celsomtrindade 发表于 Dev

囊肿

我正在使用引导程序构建网站，但是当我想在移动设备的CSS中进行某些更改时，我的@media不能按我期望的方式工作。

的HTML

<div class="container">
    <div class="main">
        <div class="col-lg-12">
            <hr class="style" />
            <h2>Main Title</h2>
        </div>
    </div>
</div>

的CSS

h2 {font-size: 30px;}
.main {background: #000 url(..img/bg.png);}

@media (max-width: 768px) {
    h2 {font-size: 20px;}
    .main {background: #fff;}
}

@media (max-width: 992px) {
    h2 {font-size: 24px;}
}

@media (max-width: 1200px) {
    /* no changes yet */
}

@media (min-width: 1200px) {
  /* no changes yet */
}

如您所见，我正试图仅在小屏幕上删除主div的背景img，但它只是被忽略了，而img仍然存在。h2相同，大小始终相同（30像素）。我可以更改它，但必须将属性放在每个“ @media”中，这会使我的CSS代码更大。

有没有办法解决这个问题？附言：我已经在Google上搜索了，正在这里搜索，但是没有找到类似的东西。

Agconti

几件事：

您需要添加meta标签，以防止视口在移动设备上虚拟缩放

<meta name="viewport" content="width=device-width, initial-scale=1">

您还应该定义@media查询定位的媒体：

h2 {font-size: 30px;}
.main {background: #000 url(http://placekitten.com/400/400);}

@media screen and (max-width: 768px) {
    .main h2 {font-size: 20px;}
    .main {background: #fff;}
}

@media screen and (max-width: 992px) {
    .main h2 {font-size: 24px; color: blue;}
}

@media screen only and (max-width: 1200px) {
    /* no changes yet */
}

@media screen only and (min-width: 1200px) {
  /* no changes yet */
}