在窗口调整大小时隐藏元素答案

【问题标题】：Hide element on window resize在窗口调整大小时隐藏元素
【发布时间】：2015-02-25 06:25:11
【问题描述】：

我试图构建一个在窗口达到一定大小时出现的表格。现在我想通过在窗口达到一定大小时隐藏表格来提高响应速度。看过window.onresize()，但是不知道怎么用下面的代码实现。

 if (iedom||document.layers){
    with (document){
        document.write('<table style="display:block" border="0" cellspacing="0" cellpadding="0"><td>')
        document.write('</td></table>')
    }
 }

【问题讨论】：

看看这个api.jquery.com/resize
您需要为此使用 jquery。
你可以使用 jQuery(window).resize(function(){ });为此
使用css3的媒体查询代替jquery

标签： javascript html css web

【解决方案1】：

通过使用 CSS 类。类似的东西：

.myClass {
   display:block;
}
// width > 768px
@media screen and (max-width: 768px){ 
  .myClass{
    display:none;
  }
}

// width < 768px
@media screen and (min-width: 768px){ 
  .myClass{
    display:none;
  }
}

【讨论】：

【解决方案2】：

通过使用 jQuery：

$( window ).resize(function() {
  // Adding table when window resized to below 500px
  if($(this).width() <= 500){
    $( "body" ).append( "<table id='dynamicTable'><tr><td>Table created</td></tr></table>");

  }else if($(this).width() > 500){
    // Removing table from DOM when window resized to above 500px
    $( "#dynamicTable" ).remove();
  }

});

【讨论】：

【解决方案3】：

我有一个关于这个主题的经历，我花了大约一个小时来解决。我与需要在屏幕调整大小时隐藏元素的任何人分享它，特别是当您的元素具有长 css 样式时：当屏幕调整大小时，您必须重写样式。例如当你有

.myClass {
    border-radius: 40px;
 }

对于主要样式和调整@media screen and (min-width: 768px) 的大小后，您只希望有两个角有border-radius，您不能写：

.myClass {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
 }

我认为主要样式会完全删除，而辅助样式在屏幕调整大小时应用，这是完全错误的，完全相同的样式将被替换，而其他样式则不会。在我的示例中，如果我只想让我的街区的 2 个角落拥有border-radius，我必须首先删除所有角落border-radius，然后应用border-top-right-radius 和border-bottom-right-radius，所以这将适用：

.myClass {
    border-radius: 0px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
 }

但前一个不会。希望您能理解并帮助您更快地解决问题。

【讨论】：