根据显示大小更改div的类别

Question

所以我使用Skeleton Framework（getskleton.com）来简化web开发和设计。它使用类来更改元素将在网格中使用的空间大小。例如，要使用一半的空间，您可以将div的类设置为"六列"（总共十二列）。

现在，我想做的是在屏幕大小小于特定数量时更改元素的类。这样，当屏幕小于X像素时，我可以更改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');
   }
})

还触发document上的resize（）。准备初始化宽度检查：

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

Answer 2

您可以使用CSS media query让类根据屏幕大小以不同的方式进行反应，而不是更改类

这种技术被称为"响应式"，例如用于使网站适合智能手机

示例

<style>
.myclass{width:1000px} /* applied in all resolution > 320px */
@media (max-width: 320px) {
.myclass{width:100px}  /* applied in resolution < = 320px (smartphone) */
}
</style>

您可以创建多分辨率的多媒体查询，以调整您的所有台式机、平板电脑和智能手机的解决方案

希望它能帮助