的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媒體查詢：應用於元素

回答

相關問題