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

Question

我正在使用 1024x768 屏幕分辨率来设计我的网站。当您从屏幕分辨率较小/较大的计算机上的浏览器中查看网站时，网站开始变形。
无论用户的屏幕分辨率是什么，如何使网站适应用户的屏幕分辨率？我相信通过 JavaScript 或 CSS 是可能的，但不确定如何......

Answer 1

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

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

---

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

Answer 2

您正在寻找的是浏览器“视口”。

此链接很好地概述了如何获取视口： http:// /andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

在大多数标准浏览器中，您可以在 JavaScript 中引用 window.innerWidth 和 window.innerHeight。

如果您使用的是 dojo JavaScript 框架，那么您只需调用 dijit.getViewport() 即可，它会为您完成繁重的工作。

获得视口的尺寸后，您就可以决定网页如何响应从浏览器接收的信息。