根據顯示大小更改div的類別

因此，我使用框架框架（getskeleton.com）來簡化Web開發和設計。它使用類來改變元素將在網格中使用多少空間。例如，要使用一半的空間，您可以將div的類設置爲「六列」（共十二個）。根據顯示大小更改div的類別

現在，我想要做的是當屏幕尺寸小於特定量時更改元素的類別。這樣，當屏幕小於X px時，我可以改變div元素的類來使其達到全寬。

謝謝！

2015-04-04 José María

而是更改類，你可以使用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>

您可以創建許多媒體查詢了許多分辨率來適應你的解決方案所有的臺式機，平板電腦和智能手機

希望它能幫助

來源

2015-04-04 10:11:48

** **骨架具有預定義CLAS你不能修改類定義。 – 2015-04-04 10:19:40

你不需要修改任何類，但添加CSS的一個新的部分來處理在不同的分辨率通過在Skeleton的css媒體查詢 – 2015-04-04 10:21:41

這些類每個類是預定義的，添加或刪除任何css屬性將停止工作的骨架。通過javascript向/從元素添加和刪除預定義的類是唯一的解決方案來與Skeleton進行挑戰。 – 2015-04-04 10:33:02

爲骨架類有預定義值，你不應該修改其屬性，解決的辦法是使用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一個調整大小（）來初始化寬度檢查：

$(document).ready(function(){ 
.resize() 
});

來源

2015-04-04 10:18:49

根據顯示大小更改div的類別

回答

相關問題