如何将网站适应用户的屏幕分辨率？

Question

我正在设计我的网站，使用的是1024x768的基础屏幕分辨率。当您在浏览器中查看该网站时，如果您的计算机具有较小/较大的屏幕分辨率，则该网站开始变形。
无论用户的屏幕分辨率如何，我该如何使网站适应用户的屏幕分辨率？我相信可以通过JavaScript或CSS实现，但不确定如何操作...

- Jmlevick

---

你可以使用https://dev59.com/fm445IYBdhLWcg3wQX-G中提供的方法。 - Erix0r

Answer 1

解决这个问题的最佳方式是，不要使用px，而是使用em或百分比（%）。

.container {
  width: 1000 px;
  height: 750 px;
}

---

.container {
  width: 90%;
  height: 90%'
}

- Rakesh Juyal

Answer 2

你需要查找的是浏览器的“视口”。 这个链接提供了如何获取视口的良好概述：http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/。 在大多数标准浏览器中，您可以在JavaScript中引用window.innerWidth和window.innerHeight。 如果您正在使用dojo JavaScript框架，则可以调用dijit.getViewport()，它将为您完成繁重的工作。 一旦您获得了视口的尺寸，就由您决定您的网页将如何对来自浏览器的信息做出反应。

- nss