Javascript 调整大小函数

Question

我运行遇到 javascript 根据屏幕尺寸调整元素大小的问题。我想将这段具有相同功能的代码翻译成 css 简单 class。

$(window).resize(function(){ // On resize
   $('item2').css({'height':(($(window).height()))+'px'});
});

我试过了

.test2 {
    height: 100%;
}

但不起作用 - 如果我删除脚本部分元素不是所需的（全屏高度）。

脚本的问题在于它实现了标记的样式，除非使用 !important...

，否则无法通过媒体查询更改该样式

Answer 1

如果 item2 是 class 那么您需要在选择器中添加 .。

$(window).resize(function(){ // On resize
  //$('.item2').css({'height':(($(window).height()))+'px'});
  $('.item2').height($(window).height());
});

Answer 2

要使 height 等于屏幕高度的元素，您必须将 position:fixed 设置为该元素并添加 height:100%，或者，如果您想要保持文档流，您还需要将文档高度设置为 100%，子元素的所有父元素也必须为 100% 高度。

最简单的方法显然是第一种方法，但该选项会将您的元素从自然文档流中拉出来。

.test2{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    z-index:2;
}

$(window).resize(function(){
     $('item2').addClass('test2);
});

请记住，每个调整大小事件都会运行执行此函数，这会消耗性能。

要了解这个问题，您可以查看关于去抖动的解释： https://davidwalsh.name/javascript-debounce-function

Javascript 调整大小函数

Javascript resize function

html

javascript

css

jquery

jquery-events