Question

我正在尝试使用网格系统创建一个响应式网站，一旦屏幕低于640px，网格大小将变为100％，而不是填充屏幕宽度的25％。

然后我想要隐藏剩下的3个div，并允许用户通过按钮或触摸滚动它们。

到目前为止，我已经完成了这项工作，但一旦超过640px，我就无法将其更改回网格系统。

所以我的想法是在屏幕超过640px时删除id

这是一个小提琴：http://jsfiddle.net/digitalk/w6L87xv3/1/

这是最好的方法，我该怎么做

这是我的查询代码，但如果只在刷新浏览器时调整浏览器大小，它就不起作用：

if($(window).width() > 640 )
{
    $('.swipe-container').removeAttr('id');
}

Answer 1

您需要在首次加载时触发调整大小：

$(window).on('resize',function(){
//your code goes here
}).resize();//resize on load.

Answer 2

每当窗口大小发生变化时，您也会进行检查。将代码放在一个函数中，这样您就可以在页面加载和调整窗口大小时调用它。

如果窗口缩小到640以下，您还需要再次添加ID。此外，请跟踪状态，这样您就不会尝试为每个事件添加或删除ID。

var currentState = false;

function setSize() {
  var state = $(window).width() > 640;
  if (state != currentState) {
    currentState = state;
    if (state) {
      $('.swipe-container').removeAttr('id');
    } else {
      $('.swipe-container').attr('id', 'mySwipe');
    }
  }
}

setSize();
$(window).on('resize', setSize);

一个简单的演示：http://jsfiddle.net/oxxxdww5/

Answer 3

不，这不是最好的方法。

CSS中有一些叫做媒体查询的东西

.swipe-container{
    witdh: 25%;
}

@media (max-width: 640px){
    .swipe-container{
        witdh: 100%;
    }
}

这里的想法是你有标准属性，但是当屏幕大于640px时会例外。您也可以使用min-width执行此操作：

.swipe-container{
    witdh: 100%;
}

@media (min-width: 641px){
    .swipe-container{
        witdh: 25%;
    }
}

请注意，您应该超过给定宽度（640px）。

我希望这会有所帮助

浏览器超过640px后删除id

3 个答案: