jQuery的動態容器寬度

我有這樣的代碼：jQuery的動態容器寬度

$(document).ready(function(){ 

var screen_size=$(window).width(); 

if(screen_size<1200 && screen_size>=1000) 
{ 
$("#container").width(1000); 
} 
else if(screen_size>=1900) 
{ 
$("#container").width(1400); 
} 

});

我決定建立一個容器1200像素寬度，這是根據用戶的分辨率調整在某些情況下（實際寬度）。這段代碼運行良好，但我想問問這是否是一種很好的方式來完成這種操作。謝謝你的幫助！

來源

2014-07-23 pavon147

爲什麼你不使用CSS3媒體查詢？ –

@AlirezaAhmadi是的，我知道CSS3媒體，但我認爲我可以嘗試用jQuery來做這件事，所以你認爲CSS3媒體查詢更合適？ – pavon147

是的，媒體查詢是一種更爲標準的方式，可以在移動設備上爲您提供更好的性能和用戶體驗，但它可能缺乏瀏覽器兼容性。 –

東西是更好地與媒體的質疑也許

@media all and (max-width: 1200px) and (min-width: 1000px){ 
    #container{ 
     width:1000px; 
    } 
} 
@media all and (min-width: 1900px){ 
    #container{ 
     width:1400px; 
    } 
}

來源

2014-07-23 20:09:01 joegandy

您可以使用CSS3媒體查詢來實現這件事。你可以通過這個鏈接去了解它 Link1，Link2，Link3

你可以做這樣的事情來設定屏幕

@media only screen and (min-device-width : 1000px) and (max-device-width : 1200px) and (orientation : landscape) { 
}

來源

2014-07-23 20:11:17

從代碼在你的例子中，你一定要在CSS媒體查詢去因爲這是一個純粹的風格問題。但是，如果您仍想採用行爲方式，那麼假設您需要根據屏幕大小觸發其他行爲，則應使用window.matchMedia以重新使用媒體查詢來規定您的「自適應行爲」。這在JavaScript中的行爲組件需要在某些媒體上作出不同反應的場景中非常有用。

我創建了一個小例子： http://jsbin.com/wawey/1/edit

來源

2014-07-23 21:01:30 gkunz

我真的很感謝你的回答，謝謝！ – pavon147

jQuery的動態容器寬度

回答

相關問題