Question

我遇到了javascript问题，根据屏幕大小调整元素大小。我想将具有相同功能的代码翻译成css简单类。

$(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调整大小功能

2 个答案: