调整窗口大小时将 div 大小更改为缩放答案

【问题标题】：Change div size to scale when window resized调整窗口大小时将 div 大小更改为缩放
【发布时间】：2013-12-22 13:27:57
【问题描述】：

基本上，我有一个包含整个网站的 div。它的高度为625px，宽度为1250px。当浏览器窗口调整大小或在手机/平板电脑上使用时，有什么方法可以在保持比例的同时调整它的大小？我知道有人会说使用% 而不是px，但我有一个非常可控的用户界面。

当网站在特定浏览器中使用时，还有没有弹出窗口？

谢谢

【问题讨论】：

您需要使用 Javascript。
你说得对，我要说...使用%。
使用媒体查询来达到预期的效果。

标签： html css browser resize window

【解决方案1】：

最好和最直接的答案是使用%，因为这是预期用途。我真的建议您重新设计布局，以便可以使用百分号。

如果这对您不起作用，总是有媒体查询 http://www.w3.org/TR/css3-mediaqueries/ 或 @sable-foste 和 @abdul-malik 指出的 Javascript。

【讨论】：

我想我会处理媒体查询并编写一些常见的大小，谢谢 :)

【解决方案2】：

无论出于何种原因，您都可以使用它（使用 JQuery）：

$(window).resize(function() {
    resizeSite();
});

function resizeSite(){
    var winH = $(window).height();
    var winW = $(window).width();
    // you will want to do some stuff here for deciding what to do and when...
    // when the window size is too small shrink the site using your ratio
    // when the window is larger increase the size of your site i.e.
    // Height = Width / 2
    // Width = Height * 2
    var tgtW =  winH * ratio;
    var tgtW =  winH * ratio;
    $("#siteContainer").height(tgtH).width(tgtW);
}

并在加载时添加对函数的调用。我认为这样做可能会给您带来更多问题，尽管这只会缩小包含元素的大小，它的内容会发生什么？如果将其缩小以适合纵向放置在手机上，那么显示器将变得很小且毫无意义，那么它内部的布局会是什么？

【讨论】：