Question

我正在使用bootstrap构建一个网站，但是当我想在移动设备的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，尺寸始终相同（30px）。我能够改变它，但我必须将属性放在每个'@media'中，这将使我的css代码更大。

有没有办法解决这个问题？ Ps。：我已经谷歌了，在这里搜索但没有找到类似的东西。

Answer 1

一些事情：

您需要添加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 */
}

工作演示：http://jsbin.com/pimujahosete/1/edit

@media无法正常工作

1 个答案: