使div响应

Question

我想获得一个div，其中包含一组工具responsive.I有一个下面的菜单，我已作出响应。有人能让我知道这是错的吗？

#tools { 
 
    width: 160px; 
 
    position: fixed; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    line-height: 1.4em; 
 
} 
 
@media only screen and (max-width: 600px) { 
 
    #tools { 
 
    width: 70%; 
 
    } 
 
}

<div id="tools" style="width: 100%"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <input type="text" id="searchInput" placeholder="Type To Filter" ng-model="search" class="searchMenu"> 
 
     </td> 
 
     <td id=uploadedit> 
 
     <button id="upload" onclick="insertIntoDatabase()" class="pinColor"><i class="fa fa-upload fa-2"></i> 
 
     </button> 
 
     </td> 
 
     <td id=impledit> 
 
     <button id="implview" onclick="openImplView()" class="pinColor"><i class="fa fa-pencil fa-2"></i> 
 
     </button> 
 
     </td> 
 
     <td> 
 
     <button id="home" class="homeButton"><i class="fa fa-home fa-2"></i> 
 
     </button> 
 
     </td> 
 
     <td> 
 
     <button id="keep-menu-open" class="pinColor" ng-click="openAndFixMenu"><i class="pinColor"></i> 
 
     </button> 
 
     </td> 
 
     <td> 
 
     <button id="open-left" class="toggleButton" ng-click="toggleMenu()"> <i class="fa fa-bars fa-2"></i> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

你在你的媒体查询有一个错字：它应该是#而不是##。除此之外，你声明width: 100%内联，它覆盖了你在样式表中写的任何内容，这就是为什么你看不到查询结果。

Answer 2

也许最好采取风格= “100％”，从DIV，任何内嵌样式类似这样的意志战胜骑无论是在样式表。

另外，在媒体查询你有

##tools { width: 70%; } 

变化

#tools { width: 70%; }