根据屏幕/窗口/设备大小使网页拉伸（或收缩）答案

【问题标题】：Making a webpage stretch (or shrink) according to screen/window/device size根据屏幕/窗口/设备大小使网页拉伸（或收缩）
【发布时间】：2016-03-28 18:15:18
【问题描述】：

这是我的网页：

是否可以根据屏幕/窗口/设备大小拉伸（或缩小）它？我想不惜一切代价避免滚动。

我不担心由于过度拉伸或收缩而导致页面的奇怪外观。

我知道这很愚蠢，但我希望它看起来像一个应用程序而不是一个网页。每个元素都应该留在它的位置。它需要更像是“拉伸以适应”墙纸。

【问题讨论】：

刚开始做 CSS 的时候应该考虑过...
您可以在 CSS 中使用 $('body').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' }); 隐藏溢出，然后设置一些媒体查询以使其具有响应性。
您可以使用 CSS 媒体查询来根据屏幕大小控制页面上元素的显示。 developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
您需要展示代码以及您迄今为止尝试过的内容，以获得任何有价值的答案。
得到了答案，谢谢大家！

标签： javascript jquery html css web

【解决方案1】：

我有三个选择。

您可以选择响应式设计。 Bootstrap 会更受欢迎。
设置视口的最小尺寸。<meta name="viewport" content="width=1200px, maximum-scale=1.0 ">
jQuery 设备宽度

var widnow_wth = $( window ).width(); $(".wrapper").css('min-width',widnow_wth);

【讨论】：

【解决方案2】：

将这两种 CSS 样式添加到您的 div 中，它应该可以工作。

width: 80%;
height: 50%;

您也可以参考这些网站了解更多信息。

【讨论】：