调整浏览器窗口大小时，调整div及其内容的大小

Question

当浏览器窗口大小改变时，是否可以自动调整div和其内容的大小？我希望文本不换行。我想调整图像和字体大小，以得到相同的构图（或布局）。是否可以使用CSS来实现这一点？谢谢，Martin

- Martin Pilch

Answer 1

CSS只提供了有限的（半）事件，但是您可以使用宽度或方向媒体查询根据窗口的宽度应用不同的样式。

因此，对于某些浏览器，您可以使用以下方法：

@media all and (orientation:portrait) {
    body { color: red; }
}

当窗口宽度小于其高度时，将所有文本涂成红色。

更准确地说，您可以使用 width：

@media all and (max-width:800px) {
    body { color: red; }
}

当窗口小于800像素时，它将使文本变为红色。尝试调整此页面的大小以查看效果。

要更精确需要使用JavaScript。

- Joel

Answer 2

你可以使用jQuery的resize方法，然后像这样添加代码：

$(window).resize(function() {
     if($(window).width() == 800)  // u can choose the size of the window also.
            $("any particular div").css("font-size":"14px");
});

所以你可以添加、更改字体大小或任何图像高度或其他任何东西...... 如果你不想使用jQuery，那么你可以查看下面的链接， WINDOW SIZE

但从我的角度来看，你应该使用Jquery......

- Nitz

---

也许我可以使用JavaScript改变内容的大小（字体、图像大小等）。当窗口大小调整时，我可以相对于先前的大小重新调整内容元素（使用％）。我会尝试并给出反馈。谢谢。 - Martin Pilch

Answer 3

我认为以下解决方案非常适用于始终调整大小的对象——这只是一个例子：

CSS：

.scale
{
    font-size: calc(1vw + 1vh);
    width: calc(10vw + 10vh);
    height: calc(5vw + 5vh);
    padding: calc(1vw + 1vh);
    background-color: yellow;
}

HTML：

<div class="scale">
Resize container to resize me!
</div>

代码片段：https://jsfiddle.net/uxj77rg1/

- lsblsb

Answer 4

我想相对于父级div和窗口大小改变图像大小。我使用了下面发布的代码。问题是，图像宽度正确调整大小，但高度被除以13而不是3.9（在我的情况下）。你能看到错误吗？谢谢

    var height = window.innerHeight;
    var width = window.innerWidth;

    var pic = document.getElementById('picture');
    var snimek = pic.childNodes[0];

    var heightRatio = snimek.clientHeight / height;
    var widthRatio = snimek.clientWidth / width;

    console.log(widthRatio +' x '+heightRatio);

    for(i = 0; i < snimek.childNodes.length; i ++)
    {
        if(snimek.childNodes[i].tagName == 'IMG') {

            if(widthRatio > 1 || heightRatio > 1) {
                console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height);
                if(widthRatio > heightRatio)
                {
                    snimek.childNodes[i].width /= widthRatio;
                    snimek.childNodes[i].height /= widthRatio;
                }
                else
                {
                    snimek.childNodes[i].width /= heightRatio;
                    snimek.childNodes[i].height /= heightRatio;
                }
                console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height);
            }
        }
    }

- Martin Pilch

---

问题解决了！只需要调整宽度或高度即可，纵横比会自动改变另一个尺寸。 现在我需要改变字体大小。我会报告我的成功。 - Martin Pilch