如何调整内容以自动适应屏幕大小？

Question

我要求应用程序（HTML，CSS和Javascript）自动调整到屏幕窗口大小 - 从笔记本电脑到桌面到平板电脑。 有谁知道如何做到这一点？

Answer 1

您需要学习响应式设计。但我会告诉你一个关键：媒体查询。

使用这样的CSS

@media only screen and (max-width: 500px) {
  #mydiv {
    width: 80%;
  }
}

@media only screen and (min-width: 501px) {
  #mydiv {
    width: 50%;
  }
}

你可以做你需要的一切。实际上，对于某些屏幕尺寸，您可以将＃menu1设置为display：none，并将＃menu2设置为display：block，从而根据屏幕大小动态显示完全不同的布局。

尝试使用此链接，您可以使用最简单的示例 http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints