Bootstrap 3自定义css类取决于设备

Question

我需要在div上设置一个高度,我想相对于设备屏幕设置它.

对于ie:

/*Extra small devices Phones (<768px)*/
.myClass { height: 200px; }

/*Small devices Tablets (?768px)*/  
.myClass { height: 400px; }

/*Medium devices Desktops (?992px)*/    
.myClass { height: 600px; }

/*Large devices Desktops (?1200px)*/
.myClass { height: 800px; }

Answer 1

编辑:CodePen的改进示例.

我会从一个不同的角度添加它.通常,您可能需要在JS中执行不同的操作,具体取决于您的断点.为此,我经常使用:

<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>

这4个div允许您检查当前活动的断点.为了便于JS检测,您可以拥有一组这样的4个函数:

function isMobile() {
    return $('.device-xs').is(':visible');
}

你的问题缺乏足够的细节让我更好地帮助你,但是如果你需要通过简单地在不同的媒体查询中定义元素的不同属性来实现你所需要的,你可以在任何时候通过以下方式分配某个类:

if( isMobile() ) {
    $('.someClass').css('property', 'value');
}