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

【问题标题】：How to adapt website to user's Screen Resolution?如何使网站适应用户的屏幕分辨率？
【发布时间】：2011-01-24 05:59:40
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

一旦确定了视口的尺寸，您就可以决定您的网页如何对从浏览器接收到的信息做出反应。

【讨论】：