Question

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

现在，我想要做的是在屏幕尺寸小于特定数量时更改元素的类。这样，当屏幕小于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()
});

Answer 2

要改变班级，您可以使用CSS media query让班级根据屏幕尺寸以不同方式作出反应

此tecnique称为“响应式”，用于使网站适合智能手机

实施例

<style>
.myclass{width:1000px} /* applied in all resolution > 320px */

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

您可以为许多分辨率创建许多媒体查询以适应您的需要所有台式机，平板电脑和智能手机的解决方案

希望有所帮助

根据显示尺寸更改div类

2 个答案: