html - 根据显示尺寸更改 div 的类别

Question

因此，我使用 Skeleton Framework (getsculpture.com) 来简化 Web 开发和设计。它使用类来更改元素将在网格中使用的空间量。例如，要使用一半的空间，您可以将 div 的类设置为“六列”(总共十二列)。

现在，我想做的是当屏幕尺寸小于特定值时更改元素的类。这样，当屏幕小于 X px 时，我可以更改 div 元素的类以使其全宽。

谢谢!

Answer 1

由于骨架类具有预定义值，并且您不应该修改它们的属性，解决方案是使用 jquery 添加或删除类名:

$(window).resize(function(){
   var width = $(window).width();
   //Assuming X=550   
   if(width <= 550){
       $('#element').removeClass('one-half').addClass('one');
   }
   else{
       $('#myelement').removeClass('one').addClass('one-half');
   }
})

还触发 documnt.ready 上的 resize() 来初始化宽度检查:

$(document).ready(function(){
.resize()
});