使用 javascript 基于视口尺寸的变量来改变 CSS 属性

Question

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

我正在尝试使用基于视口尺寸的 javascript 变量来调整 div 的大小（因此 div 将专门针对移动 phone 的尺寸，或者当您从横向切换到纵向时。）

目前，在 Chrome 检查器中，它在 0 0（左上角）处显示 div，尺寸为 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 就可以了。只需将 "width: 100%" 添加到您的 #cloud，并确保 #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 解决方案。

使用 javascript 基于视口尺寸的变量来改变 CSS 属性

Using javascript variables based on viewport dimensions to alter CSS properties

javascript

css

variables

resize

viewport