如何根据缩放、分辨率和窗口大小正确缩放网页？

Posted 2023-03-05

【中文标题】如何根据缩放、分辨率和窗口大小正确缩放网页？

【英文标题】：How to properly scale a webpage, according to zoom, resolution and windowsize?

【发布时间】：2012-11-04 03:54:31

【问题描述】：

我正忙于开发一个网络应用程序，但我似乎找不到正确的方法来缩放所有项目以使其适合屏幕。

正如您在图片上看到的，灰色条是菜单，需要保持原位。中间的内容（包括白色背景的蓝色块）需要左右移动，也需要上下移动。调整窗口大小、缩放和其他应考虑的因素。我目前的技术失败了很多次，所以我希望你们中的任何人都知道一些好的技术。

所以正如我所说，内容需要上下左右移动。所有页面的父 div 与所有页面的宽度相同。所以一页应该有正确的窗口宽度。高度也是如此，但水平轴上只有 2 页。目前我正在使用 javascript/JQuery 调整大小。

顺便说一句，当当前内容页面大于屏幕可以显示时，可能会垂直滚动。水平滚动是不可能的。

很难解释，我正在尽我所能，但我希望有人能帮助我。

【问题讨论】：

你在这里问了很多非特定的问题，并不是所有的问题都有明确的答案。如果您希望 *** 对您有所帮助，您需要将您的问题缩小到一个可解决的问题。

也许this question 会有所帮助。

@NullPointer 这更像是居中。

并非如此。看看这个：jsfiddle.net/7etUR - 我正在使用这种菜单。但随后是某种“全屏”。

【参考方案1】：

这很有趣！也许使用 em 单位会对您有所帮助。这是一个巧妙的小技巧。

1 - 在您的父容器上将字体大小设置为 100%。

2 - 在所有子元素中，对所有尺寸、内边距、边距、边框、字体大小等使用 em。

3 - 在 Javascript 中，当页面加载时，捕获浏览器尺寸并将其保存到变量中以供以后使用。

4 - 设置窗口调整大小事件。当窗口调整大小时，获取新的浏览器尺寸。现在，一些基本的数学运算将允许您将新浏览器尺寸与原始浏览器尺寸进行比较 - 并获得一个百分比。

5 - 仍在调整大小事件中，将新百分比设置为父元素的字体大小。

您可以只使用您的中心容器或其他任何东西来设置它。具有 font-size 属性（并在 ems 中定义）的主容器的任何子元素都将随浏览器窗口自动缩放。

文字会缩放 边框大小将缩放 边界半径将缩放 尺寸、内边距、边距会缩放

很漂亮。