Javascript 我可以根据窗口的大小来增加css中的页边距吗？

我希望在调整窗口大小时，黑色div和导航栏之间的空间保持不变。我想随着窗口变小，调整页边空白顶部的大小，但我不知道如何获得窗口的当前大小并在css中使用它

照片：

Question.css

.Question {
background-color: #0B0C10;
margin: 2% 5% 3% 5%;
padding: 4%;
color: #C5C6C7;

}

问题.js

import React from 'react'
import './Question.css'

class Question extends React.Component {
    render() {
        return (
            <div className='Question'>
                applications of adaptive testing, starting with Binet in 1905. Adaptive tests are comprised of items
            selected from a collection of items, known as an item bank. The items are chosen to match the
            estimated ability level (or aptitude level, etc.) of the current test-taker. If the test-taker succeeds on
            an item, a slightly more challenging item is presented next, and vice-versa.
            </div>
        )
    }
}

export default Question;

NavBar.js

import React from 'react'
import './NavBar.css'

class NavBar extends React.Component {
    render() {
        return (
            <div className='NavBar'>
                <h3 className='Title'>CATlin</h3>
            </div>
        )
    }
}

export default NavBar;

从“React”导入React
导入“./NavBar.css”
类NavBar扩展了React.Component{
render（）{
返回(
卡特林
)
}
}
导出默认导航栏；

提前谢谢你

是的，你可以。“vh”是屏幕高度的百分比。（还有，vw：屏幕宽度的百分比。）请检查并运行我的代码，调整屏幕高度

.Question {
  background-color: #0B0C10;
  margin: 2% 5% 3% 5%;
  padding: 4%;
  color: #C5C6C7;
}

@media screen and (max-width: 600px) {
  .Question {
    margin: 4% 5% 3% 5%;
  }
}

.container{
边际上限：50vh；
高度：100vh；
宽度：100vw；
背景色：#ecf0f1；
}

---

如果您想要更流畅地完成某项工作，则必须仅使用

vw

和

vh

单元，而无需媒体查询

.foo{
边距顶部：10vw；/*边距顶部为窗口宽度的10%*/
}
.酒吧{
边距顶部：10vh；/*边距顶部为窗户高度的10%*/
}

我看到了关于跟踪当前窗口大小的信息。我认为你没有提供足够的信息来回答你的问题。考虑发布相关的CSS来提供更多的上下文。抱歉，现在只添加代码。感谢您指出，如果您使用

max width:600px

，您必须使用

min width:601px

，否则在600px时，这两个规则都适用，它将下降到特定的重量。这就做到了。谢谢这似乎是一个很好的解决方案，但在全尺寸情况下，差距似乎非常大。这似乎是一个很好的解决方案，但在全尺寸情况下，差距似乎非常大。

.Question {
  background-color: #0B0C10;
  margin: 2% 5% 3% 5%;
  padding: 4%;
  color: #C5C6C7;
}

@media screen and (max-width: 600px) {
  .Question {
    margin: 4% 5% 3% 5%;
  }
}