如何調整內容以自動適合屏幕尺寸？

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