有條件地在響應式設計中加載JavaScript

我正在嘗試做一些我認爲應該非常簡單的事情，但是我沒有找到解決方案的簡單解釋。有條件地在響應式設計中加載JavaScript

我在建立一個首先移動的響應式網站（默認320px寬度）。在這個小的分辨率下，網站只有一列，我很樂意讓每個「盒子」擴展或收縮到內部內容的自然高度。

但是，在站點擴展爲三列的較大分辨率下，我想添加一個小的Javascript函數來均衡每列的框的高度。我所說的功能是這樣的：

jQuery(document).ready(function() { 
    setHeight('#inner-footer .widget-area'); 
}); 

var maxHeight = 0; 
function setHeight(column) { 
    //Get all the element with class = col 
    column = $(column); 
    //Loop all the column 
    column.each(function() {  
     //Store the highest value 
     if($(this).height() > maxHeight) { 
      maxHeight = $(this).height();; 
     } 
    }); 
    //Set the height 
    column.height(maxHeight); 
}

我發現不同的方式來做我在說什麼。

我可以使用modernizr「load」函數（形式上是yesnope.js）。
使用如在此鏈接描述併入尼古拉斯Zakas「isMedia」功能自定義函數Media Specific Javascript或
JavaScript時使用的「屏幕寬度」可變功能如
var screenWidth = (screen.width < 768) ? true : false;
如Media queries in the real world

描述的自定義

由於我的javascript知識有限，我一直無法真正編寫代碼來獲取任何這些方法來爲我的腳本工作。有人可以幫我從這裏出去嗎？

我有辦法沒有特別的偏好我只是希望它的工作跨瀏覽器，等我的感覺是，Modernizr的方法是使在用例數最多這項工作的最強大和穩定的方式，但我對此並不完全確定。我從來沒有修改過modernizr，所以我不確定如何編寫以及在哪裏放置自定義加載函數。

任何人有modernizr方法或任何其他解決方案（或其他解決方案）的想法和具體代碼？我非常感謝幫助。

來源

2012-01-14 user1148975

爲什麼使用JavaScript時，你可以構建相應的CSS（也許戲弄將常見的東西放到一個文件中，具有各種分辨率的單獨文件）？對我來說似乎更簡單的解決方案。 – 2012-01-14 06:52:50

Modernizr的可以檢查媒體查詢申請與Modernizr.mq（）函數

你通過它，你希望它匹配這樣

if(Modernizr.mq('all and (min-width: 768px)')) { 
    // Equal height code here 
}

這裏曾經最小寬度爲您的媒體查詢過去768px，那麼函數中的代碼將被調用，所以對於你來說，等高代碼。

來源

2012-01-14 08:44:30 ianckc

這正是我正在尋找的。有效。謝謝。 – user1148975 2012-01-14 14:59:21

這正是我正在尋找的。有效。謝謝。關於Ed的評論，只是對靜態css進行更改並沒有考慮到內容是動態生成並隨時間變化的情況。如果你有divs充滿了來自web服務或ajax調用的內容，或者甚至像特色內容框那樣簡單，你不知道在任何特定時刻相對高度會是什麼。無論內容如何隨時間變化，Javascript都會對佈局進行適當的調整。 – user1148975 2012-01-14 15:14:34

很高興幫助。如果你不介意你能否將我的答案設定爲已接受的答案。謝謝 – ianckc 2012-01-14 18:45:52

您可以嘗試使用matchMedia，這將允許您根據媒體查詢加載特定的js。

https://developer.mozilla.org/en/DOM/window.matchMedia

保羅愛爾蘭一直致力於對一些polyfills

https://github.com/paulirish/matchMedia.js/

希望這有助於

伊恩

來源

2012-07-13 10:39:17 iancrowther

有條件地在響應式設計中加載JavaScript

回答

相關問題