如何调整内容以自动适合屏幕尺寸？

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=trysensitive_breakpoints