Question

是否有办法根据浏览器宽度缩小/放大所有元素，包括文本，图像等？它就像“缩小”一样。使用浏览器只是为了避免浏览器水平滚动条。

Answer 1

您只需使用此css规则即可调整图片和视频的大小。

img, video { max-width: 100%; }

对于文字，您可以使用em来调整视口和分辨率。您还应该在html和body元素

上设置字体大小

html {
    font-size: 100%;
}

body {
    font-size: 1em;
}

/* Adjust the font size here to upscale the font when you've resized the page to 700px */
@media screen and (max-width: 700px) {
    html { font-size: 110%; }
}

如果您实际上正在考虑某些视口的字面上放大/缩小，请使用媒体查询。像这样：

@media all and (max-width: 700px) and (min-width: 400px) {
    /* some funky stuff */
}

<强> EXTRA

要平滑不同视口之间的过渡，请在html标记上使用此css属性

transition: all 1s ease;

Answer 2

是的，虽然它需要JavaScript并且不能与所有浏览器一起使用，但只有那些支持CSS缩放（我知道至少Firefox不支持）。我怎么做，是说标准的非缩放页面宽度是1024，我使用jQuery与行

$("html").css("zoom",window.innerWidth/1024);

每次调整窗口大小（使用window.onresize）。我使用它的网站仍然是非公开的，因此我无法向您展示示例，但效果非常好。

更改浏览器窗口宽度时，向上/向下放大所有元素，图像，文本

2 个答案: