使用基於視口尺寸的javascript變量來改變CSS屬性

Question

目前正在學習javascript，無法理解這一點，或者為什么它不起作用。

我正在嘗試使用基於視口尺寸的javascript變量來調整div的大小（因此div將針對移動電話的尺寸進行擴展或縮小，或者當您從橫向切換為縱向時）。

目前，在Chrome檢查器中，它顯示div為0 0（左上角），尺寸為0px x 0px。 console.log確實提供了視口的尺寸，並建議它是否顯示為縱向或橫向。

此外，我可以確認圖像是在我設置的目錄中（因為有一次我有這個工作，但后來我打破了背景。背景目前正在工作）。

這是迄今為止的javascript -

  $(document).ready(function() { //Variables for viewport height and width. var windowWidth = $(window).width(); var windowHeight = $(window).height(); //resizeCloud function alters cloud image size by append cloud ID to include H & W variables function resizeCloud() { $('#cloud').css('width: ',windowWidth + 'px'); $('#cloud').css('height: ',windowHeight + 'px'); $(window).resize(resizeCloud); }; //Will advise if app is in portrait or landscape console.log("width: " + windowWidth); console.log("height: " + windowHeight); if (windowWidth < windowHeight) { console.log("Portrait mode"); } else { console.log("Landscape mode"); }; 

}）;

和CSS -

  #cloud { background-image: url('images/cloud.png'); position: absolute; top: 0; left: 0; background-size: contain; 

HTML只是<div ID ='cloud'> </ div>（無空間）。

如果有更簡單的方法，請告訴我！ 任何幫助非常感謝！

Answer 1

你不需要使用JS，CSS就可以了。 只需在#cloud中添加“width：100％”，並確保#cloud相對於跨越屏幕整個寬度的容器。

Answer 2

對於事件是綁定，您應該聲明函數resizeCloud並將其綁定到外部。

// Declare function
function resizeCloud() {
    $('#cloud').css('width', windowWidth + 'px');
    $('#cloud').css('height', windowHeight + 'px');
};

$(window).resize(resizeCloud); // Bind event

另外，要注意css方法的論點： http ： //api.jquery.com/css/

無論如何，你正在嘗試使用javascript作為CSS解決方案。