DEMO

Question

好像我已经完成了所有事情，但它不会起作用。检查元素时也不显示。要检查它是否是媒体查询，请尝试设置不同的bg颜色。

@media screen and (max-width:1050px) {
  #hmbn {
    width:400px !important;
    background-color:red !important;
  }
}

div放在bootstrap行

中

http://jsfiddle.net/CH8Hb/

Answer 1

这是由#hmbn

中的浮动元素引起的

Bootstrap在clearfix中有一个buiilt。将课程clearfix添加到#hmbn

<div id="hmbn" class="clearfix">
    ...
</div>

WORKING DEMO

编辑问题后，以下内容不再适用......

删除;

@media screen (max-width:1050px) {

Answer 2

试试这个它会正常工作！

@media (max-width: 1050px) {
    #hmbn {
        width:400px;
        background-color:red;
    }
}

DEMO

非常重要：

这样可行： DEMO

@media (max-width: 1050px) {/*1.position*/
    #hmbn {
        width:400px;
        background-color:red;        
    }
}

@media (max-width: 650px) {/*2.position*/
    #hmbn {
        width:40px;
        background-color:orange;        
    }
}
@media (max-width: 480px) {/*2.position*/
    #hmbn {
        width:10px;
        background-color:green;
    }
}

因为计算机正在从顶部到底部读取它并覆盖样式

这不起作用： DEMO

@media (max-width: 480px) {/*1.position*/
    #hmbn {
        width:10px;
        background-color:green;
    }
}

@media (max-width: 650px) {/*2.position*/
    #hmbn {
        width:40px;
        background-color:orange;        
    }
}
@media (max-width: 1050px) {/*3.position*/
    #hmbn {
        width:400px;
        background-color:red;        
    }
}

Answer 3

Here你去了。

@media screen and (max-width:1050px) {
    #hmbn {
        width:400px;
        background-color:red;
    }
    .im1fill {
        float:none;
    }
}

说明：#hmbn没有收到I高度，这是由a未显示为块引起的，这是由于锚点内的div浮动引起的。移除浮子，你修复一切。您也可以删除!important标记。

媒体查询不起作用

3 个答案:

DEMO