Question

我正在完成编码测试。我想根据屏幕尺寸更改所有div尺寸。这是因为我的笔记本电脑上的测试看起来与在Mac电脑显示器上看起来不一样。在我的小笔记本电脑上，所有的div看起来都很大，但是在Mac电脑显示器上它似乎看起来不错。

Answer 1

使用vh。

如果您想要全宽和全高，请使用100vh和100vw。否则就会改变。

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

Answer 2

使用媒体查询或以％或vw / vh而不是px为设置宽度/高度我希望你能找到的东西...... 或者可以使用像bootstrap或foundation

这样的框架

Answer 3

您应该使用Chrome开发者工具检查您想要更改div大小的分辨率！

如果您有div：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，当屏幕尺寸为480px宽时，您只希望div为25px X 25px，您可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

这是通过媒体查询完成的 - 这非常简单和标准。我希望它有所帮助！

如何根据屏幕尺寸调整页面上的Div？？

3 个答案: