外部CSSからのメディアクエリのミュート

Question

私はulリストを使用してメニューを表示するために、ページでW3CSSスタイルシートを使用しています。 それはうまく動作しますが、それは私のニーズのためにあまりにもすぐに最小限のスタイルの方法に切り替わります。

ビューポートのサイズが等しいか600PX未満である場合に変更するライン158、159および160で、この中で関わっ3つのメディアクエリがあります

@media screen and (max-width:600px){.w3-topnav a{display:block}.w3-navbar li:not(.w3-opennav){float:none;width:100%!important}.w3-navbar li.w3-right{float:none!important}} 
@media screen and (max-width:600px){.w3-topnav .w3-dropdown-hover .w3-dropdown-content,.w3-navbar .w3-dropdown-click .w3-dropdown-content,.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}}  
@media screen and (max-width:600px){.w3-topnav,.w3-navbar{text-align:center}} 

私はそれが350pxで切り替えたいが、私は思います他のページでもファイルを使用しているため、変更を適用する必要があるたびにw3.cssファイルを編集しないようにします。デフォルトの動作が必要です。

私の任意のCSSからw3.cssメディアクエリをミュートする方法はありますか？ Javascriptベースのソリューションは受け入れられますが、可能であればこれらを避けたいと考えています。

は事前

EDIT

私は私が私の要求に十分明らかだったかわからない中ありがとうございましたので、私はここでそれを再定義しようとするでしょう。

w3.cssファイルからこれらのメディアクエリをミュートしたいので、600pxの代わりにmax-width：350pxを使用してCSSファイルでオーバーライドできます。

Answer 1

あなたができることは、custom.cssスタイルシートを作成し、最後の部分をヘッダー領域に読み込むことです。これは、CSSスタイルシートをオーバーライドとしてロードします。

Answer 2

要素に適用されるさまざまなスタイルを調べて、クラス関連のスタイル設定を隔離した後、元のw3.cssスタイルシートを変更せずに自分のニーズに合わせて動作を変更できました。

まず、私が600PXでメディアクエリのスタイルを元に戻しています

@media screen and (max-width:600px){ 
    /* reverting the effects of the original @media query */ 

    .w3-navbar li:not(.w3-opennav){float:left; width: initial!important} 
    .w3-navbar li.w3-right{float: right !important;} 
    .w3-navbar .w3-dropdown-click .w3-dropdown-content, 
    .w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:static} 
    .w3-navbar{text-align:initial} 
} 

それから私は350pxでメディアクエリに元w3.cssスタイルを追加しました：

@media screen and (max-width:350px){ 
    /* these styles are the same as the ones in the original w3.css stylesheet, 
     in @media screen and (max-width: 600px), lines 158 to 160 */ 

    .w3-navbar li:not(.w3-opennav){float: none; width: 100%!important} 
    .w3-navbar li.w3-right{float: none !important;} 
    .w3-navbar .w3-dropdown-click .w3-dropdown-content, 
    .w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative} 
    .w3-navbar{text-align:center} 
} 

上記のスタイルは、afterのw3.cssスタイルシートをロードしたカスタムスタイルシートに配置する必要があります。

これは簡単な解決策ではなく、元のスタイルシートに関する多くの研究が必要です。私の場合は200行程度だったので、ほとんど簡単な作業でした。

大きなスタイルシートの場合は、独自のスタイルを書くことをお勧めします。これは時間がかからず、何が起こっているのかを知ることができます。