的Javascript和CSS媒体查询：应用于元素

-1

CSS类请阅读问题仔细的Javascript和CSS媒体查询：应用于元素

当使用引导程序，考虑col-lg-6被应用于large屏幕尺寸和col-sm-12在小屏幕上以下情形。

演示标记在col-sm-12定义

<div class="col-lg-6 col-sm-12"> 

    <!--some content --> 

</div>

规则不适用，除非屏幕尺寸为SMALL所以我想jquery当用户调整在col-sm-12定义的屏幕和规则来执行一些动作适用为当前元素。不想用javascript解决方法来测量屏幕尺寸！

来源

2016-01-04 Mr.Arjun

bootstap网站具有默认断点http://getbootstrap.com/css/#grid-media-queries。这会告诉你正在应用col-sm-12和col-lg-6的尺寸。

至于隐藏和显示元素，您将不得不创建类来执行此操作，然后使用引导程序使用的媒体查询将它们添加到样式表。

来源

2016-01-04 00:56:51 DFord

-1

如果您正在使用jQuery然后使用is()功能检查类包装的或页面 if ($(".wrapper").is(".col-sm-12")) { // do an action here };

我的代码的任何元素似乎很基本的希望它能帮助

来源

2016-01-04 01:08:41

完整的答案，请仔细阅读问题！ –

然后你应该使用 '$（window）.bind（'resize'，function（）{ alert（'resize'）; }）;' –

not working！在JSBin尝试在这里。查看链接 - https://jsbin.com/hajogenegi/edit?html,js,output –

写自己的媒体查询在你的CSS文件：

@media (max-width: 768px) { 
    .contentShown{ 
     display:none; 
    } 

    .contenthidden{ 
     display:block; 
    } 
}

至于预成型动作像窗口加载新的内容调整大小，那么你必须监听事件和大小所需的WID日通过AJAX和负载叫你行动的新内容：

$(window).on('resize', function(){ 
     var win = $(this); //this = window 
     if (win.height() >= 820) { /* ... */ } 
     if (win.width() >= 1280) { /* ... */ } 
});

此here

来源

2016-10-20 11:44:40 ThunD3eR

我想执行一些使用javascript/jquery执行某些操作时，在特定类中定义的规则应用！我写了媒体查询！ –

对不起，我错过了你的问题。如果您不通过javascript/jquery测量screenSize，则无法预先执行任何操作。你可以做的是定义页面上哪些元素应该在CSS中可见。我编辑我的答案 – ThunD3eR

的Javascript和CSS媒体查询：应用于元素

回答

相关问题