Cssのみまたはjquery - 携帯端末でnavbarを非表示にするにはどうすればよいですか？

Question

私はnavadをipadよりも大きいデバイスと小さなデバイスで異なるスタイルのnavbarで表示したいと考えています。隠された/可視：のみ視認性を使用して、より小さなデバイス

@media (max-width: 768px) { 
    nav { 
     display:none; 
    } 
    } 

）CSSのなし可視

@media (min-width: 768px) { 
    nav 
    { 
     visibility:visible; 
    } 
} 

@media (max-width: 768px) { 
    nav 
    { 
     visibility:hidden; 
    } 
} 

3）使用jQueryの

Iは

1）CSS表示のみを使用してそれを試し

$(window).on("orientationchange load resize", function() { 
    var width = $(document).width(); 
    if(width<765){ 
     $("#navbar").hide(); 
    } 
    else if(width>765){ 
       $("#navbar").show(); 
    } 
}); 

jsfiddle（jqueryあり）：https://jsfiddle.net/codingcodingcoding/913j87bb/

何も機能しません。理由を知っている人は、教えてください。

Answer 1

ます（CSSウィンドウで）あなたのjsfiddleに追加する場合：

@media (max-width: 768px) { 
    nav { 
    display:none; 
    } 
} 

を、それが動作します。結果ウィンドウを縮小してチェックしました。これにはjqueryは必要ありません。

希望します。