在重新调整大小后，内容适合屏幕

Question

在1024的宽度下，我希望页面的主体适合没有滚动条的用户的屏幕。基本上，我想缩放整个身体，使其适合1024宽度以下的屏幕浏览器（无滚动条）。 我试过这样的事情：

function resizeWindow() {
   $(window).off('scroll');

   windowWidth = $(window).width();
   console.log(windowWidth);
     if (windowWidth > 1024) 
     {
         console.log(">1024");
     }else if (windowWidth <= 1024) 
     {
       $('body').css('height', '100vh');
       $('body').css('width', '100vw')
     }
}

$(window).resize(resizeWindow);

CSS：

body, html {
 height: 100%;
 width: 100%;
}

Answer 1

使用@media查询。

@media screen and (max-width: 1024px) {
  body, html {
    height: 100vh;
    width: 100vw;
  }
}