css - 仅当屏幕高度发生变化时，如何使我的页面调整大小

Question

我对响应式页面有疑问。我的网站有一个页面，在苹果 macbook air 上看起来不错。但是，当我从我母亲的笔记本电脑上查看我的网站时，屏幕将主页截断了一半，因为她的屏幕较小。我有响应式图像并在小屏幕上使用媒体查询，但我似乎无法让我的页面在小屏幕上看起来很好。当我改变屏幕的宽度时，图像会调整大小，但如果我只改变高度则不会。为什么不？我试图通过只对小高度进行媒体查询来解决这个问题，但这也不起作用。如何确保我的页面在较小的高度上也看起来不错？

如果您需要代码，我可以发布它或发送一个 github 链接，二者皆可。 :)

Answer 1

可以通过jquery获取div的高度，将高度设置为css。您可以按照以下代码按照自己的方式进行自定义。

 $(window).on("scroll",function(e){
    var scroll = $(window).scrollTop();    
    if (scroll > 100 ) {
         var height = $('.height-of-the-div-you-want').innerHeight();
         // alert(height);
         $('.set-this-height-dynmicallty').css('height', height);
     }
});