divを反応させる

Question

私は、反応するツールのセットを含むdivを作成しようとしています。私はそれに対応するサイドメニューを持っています。誰かが私にこのことが間違っていることを教えてもらえますか？

#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

へ

##tools { width: 70%; } 

変更を持っています。それとは別に、width: 100%をインラインで宣言すると、スタイルシートに書いたものが上書きされます。そのため、クエリの結果は表示されません。

Answer 2

おそらくにあるものの上に乗り、DIVからこの意志のような任意のインラインスタイルを= "100％" のスタイルを取るのがベストスタイルシート。それは#の代わり##次のようになります。

は、メディアクエリであなたは、あなたのメディアクエリのタイプミスを持って

#tools { width: 70%; }