javascript - 在不同的屏幕尺寸下使用 Jquery 更改 css

Question

当我删除时，此代码可以正常工作，if() {}但我希望 css 样式仅适用于特定的窗口宽度。当我添加if语句时，它不再读取 CSS 样式。知道为什么吗？

$(document).ready(function() {
   $(".icon").mousemove(function() {
      $(this).hide();
      $(".second").show(2000);
      if (windows.innerWidth > 768) {
        $(".second").css({
          "display": "grid",
          "grid-template": "200px / 200px 200px"
        });
      }
   });    
});


I also tried this and still not working:

$(document).ready(function(){
    $(".icon").mousemove(function() {

        $(this).hide();
        $(".second").show(2000);
        if ($(window).width() > 768){
          $(".second").css({
            "display": "grid",
            "grid-template": "200px / 200px 200px"
             });
        }

        else {
          $(".second").css({
            "display": "grid",
            "grid-template": "100px / 100px 100px"
             });
        }

        });
    
    });

标签： javascriptjquerycss

Answer 1

请尝试此代码，以在不同的屏幕尺寸下使用 Jquery 更改 CSS

<div id="outer-div">
    <div id="inner-div">
    <H2>Switch CSS On Window Resize</H2>
    </div>
    <div id="menu-div">
    <H2>Tags</H2>
    <a class="demo-tag">Fluid</a>
    <a class="demo-tag">Stylesheet</a>
    <a class="demo-tag">Resize</a>
    <a class="demo-tag">Demo</a>
    <a class="demo-tag">Examples</a>
    </div>
</div>

Javascript 和 Jquery：

<script>
    function switchCSS(windowsize) {
      if (windowsize > 800) {
        $("#switchable").attr("href", "web.css");
      } else {
         $("#switchable").attr("href", "mobile.css"); 
      }
    }

    $(document).ready(function() {
      switchCSS($(this).width());
      
      $(window).resize(function() {
        switchCSS($(this).width());
      });
    });
</script>

我希望这段代码对你有用。

谢谢你。