如何根据屏幕大小调整页面上的Div大小？

Question

我正在完成一个编码测试。我想根据屏幕大小改变我所有的div大小。这是因为我的测试在我的笔记本上和在mac电脑显示器上看起来不一样。在我的小型笔记本电脑上，所有的div看起来都很大，但是在mac电脑显示器上，它看起来很不错。

Answer 1

使用媒体查询或在%或vw/vh中设置宽度/高度，而不是px

我希望这就是你要找的东西..。或者使用诸如引导或基础之类的框架。

Answer 2

用vh。

参考Viewport大小的排版

如果您想要完全宽度和高度，请使用100vh和100vw。否则会有相应的变化。

div {
  height: 100vh;
  width:100vh
}

Answer 3

您应该使用Chrome工具来检查您想要改变div大小的分辨率！

如果你有一个div：

​

#bluebox {
width: 50px;
height: 50px;
background-color: blue;
}

<div id="bluebox">
</div>

​

但是，当屏幕大小为480 be时，您只希望div为25 pxx25px，您可以这样做：

​

#bluebox {
width: 50px;
height: 50px;
background-color: blue;
}

@media (max-width: 480px) {
  #bluebox {
    width: 25px;
    height: 25px;
  }
}

<div id="bluebox">
</div>

​

这是通过媒体查询完成的--这是非常简单和标准的。希望能帮上忙！