Question

我希望我的网站根据其查看的屏幕分辨率缩放<div>。

我目前在一个功能中使用此代码，该功能在身体加载时运行（gameCanvas是<div>我正在谈论的）：

var WIDTH = window.screen.availWidth/2,
    HEIGHT = window.screen.availHeight/2;

var c = document.getElementById("gameCanvas");

c.setAttribute("style","width:"+WIDTH+"px;height:"+HEIGHT+"px");
    c.style.width=WIDTH;
    c.style.height=HEIGHT;

它完成了这项工作，但它也覆盖了我的CSS样式表，它迫使我将所有样式信息放在javascript中，而不是将样式与逻辑分开。

有没有办法在CSS中动态确定这些参数，或者只更改这两个参数而不覆盖整个样式表？我已经尝试了

  c.setAttribute("height", HEIGHT);
     c.setAttribute("width", WIDTH);

但它没有做任何事情，因为它们不属于自己。

修改我的样式表（目前它已经嵌入到index.html中，但它已经在CSS表单中了）：

<style>
            body {
                background-color: black;
            }
            #gameCanvas {
                background-color: black;
                width: 800px;
                height: 600px;
                margin: auto;
                align: center;
            }
            #scoreboard {
                text-align: center;
                font-family: Segoe UI, Helvetica, Ubuntu, sans-serif;
                color: white;
            }
            #scores {
                font-size:600%; 
                padding:0; 
                margin:0;
                color: white;
            }
            #title {
                background-color: white;
                color: black;
            }
</style>

Answer 1

使用JavaScript是一种选择。作为替代方案，我将提供2个仅限CSS的解决方案。首先想到两种解决方案。

选项＃1

第一个非常标准 - 将高度和宽度设置为100％。这里需要注意的是，每个父父容器都需要将它的高度和宽度设置为100％。像这样：

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

main {
  width: 100%;
  height: 100%;
}

#gameCanvas {
  background-color: red;
  width: 100%;
  height: 100%;
}

＆＃13;

<main>
  <div id="gameCanvas"></div>
</main>

＆＃13;

选项＃2

更优雅的解决方案是使用vw和vh单位。 vw和vh单位分别等于1％的视口宽度和高度。因此1vw将是视口宽度的1％。要使元素全屏，您可以分别将宽度和高度设置为100vw和100vh。像这样：

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}

#gameCanvas {
  background-color: red;
  width: 100vw;
  height: 100vh;
}

＆＃13;

<main><div id="gameCanvas"></div></main>

＆＃13;

什么是设置动态样式元素最干净的方法？

1 个答案:

选项＃1

选项＃2