自动缩放页面使其适合屏幕答案

【问题标题】：Auto scale page so it fits the screen自动缩放页面使其适合屏幕
【发布时间】：2014-04-08 06:29:43
【问题描述】：

我有一个网站，我认为我的大多数用户在我的网站上都使用台式机或笔记本电脑。问题是在某些屏幕上，它只有 1/4 的屏幕开始使用，其余的只是背景。我怎样才能让它自动缩放，使它适合屏幕的大小？？

【问题讨论】：

你想知道css媒体查询吗？
如前所述，我的页面不应该是移动响应的，而只是自动缩放，因此即使在 27 英寸屏幕上也可以使用所有屏幕
我解释错了吗？我说在大屏幕上页面只占 1/4，其余部分是背景
设置宽度：100%，请出示你的代码jsfiddle.net
我应该对每件事都使用 % 而不是 px 还是只对身体使用？

【解决方案1】：

您可以使用 css3 转换：

-webkit-transform: scale(0.5);  /* Chrome, Safari 3.1+  */
-moz-transform: scale(0.5);  /* Firefox 3.5-15 */
-ms-transform: scale(0.5);   /* IE 9 */
-o-transform: scale(0.5);    /* Opera 10.50-12.00 */
transform: scale(0.5);

计算比例并在脚本中应用具有此比例的规则。

不要忘记将变换后的元素的left和top属性设置为全宽和全高的偏移比：

offsetRatio = (ratio - 1) / 2;

【讨论】：

【解决方案2】：

您需要使用 CSS“响应式设计”。你可以在这里找到一些例子：

http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756

基本上，您使用 min-width / max-width 和 @media 来决定显示什么以及如何显示。

如果您不习惯做那种事情，那么 Bootstrap 是完成此任务的好方法，而且花费最少：

http://getbootstrap.com/

【讨论】：

【解决方案3】：

.wrapper { 最大宽度：1000px；边距：0 自动； }

wrapper - 是您网站的主要容器

【讨论】：