html - 根据显示大小更改 div 的类

Question

因此，我使用 Skeleton Framework (getskeleton.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');
   }
})

还触发 resize() 在 documnt.ready 上初始化宽度检查：

$(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>

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

希望有帮助