使用基于视口维度的javascript变量更改CSS属性

目前正在学习javascript，我无法理解这一点，或者为什么它不起作用

我正在尝试使用基于视口维度的javascript变量来调整div的大小（因此div将专门针对手机的维度进行扩展或收缩，或者当您从横向切换到纵向时）

目前，在Chrome inspector中，它显示0 0（左上角）处的div，尺寸为0px 0px。 console.log确实提供了视口的尺寸，并建议它显示为纵向还是横向

此外，我可以确认图像是否在我设置的目录中（因为在某一点上我让它工作，但后来我破坏了背景。背景当前正在工作）

以下是目前为止的javascript-

HTML只是

（无空格）

---

如果有更简单的方法，请告诉我！非常感谢您的帮助

你不需要使用JS，CSS就可以了。只需将“宽度：100%”添加到你的#云中，并确保#云相对于一个跨越整个屏幕宽度的容器。

你不需要使用JS，CSS就可以了。只需将“宽度：100%”添加到您的#云，并确保#云相对于一个跨越整个屏幕宽度的容器。

对于要绑定的事件，您应该声明函数

resizeCloud

，并将其绑定到外部

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

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

另外，请注意css方法的参数：

---

无论如何，您正在尝试将javascript用于CSS解决方案。

对于要绑定的事件，您应该声明函数

resizeCloud

，并将其绑定到外部

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

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

另外，请注意css方法的参数：

---

无论如何，您正在尝试使用javascript作为CSS解决方案。

是（：（我将编辑我的主要帖子）请澄清。您希望您的图像大小100%基于您的视口大小。不确定这样问。只是创建了这个。如果是这样，就不需要为此编写任何不需要的JS。使用CSS本身处理它。是（：（我将编辑我的主要帖子）要清楚。你希望你的图像大小是100%基于你的视口大小。不确定这样问。只是创建了这个。如果是这样的话，不需要任何不需要的JS为这个编写。处理它与css本身。

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

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