如何根据缩放、分辨率和窗口大小适当地缩放网页？

Question

我正忙着开发一个web-app，但我似乎找不到正确的方法来缩放所有的项目，使其适合屏幕。

​

​

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

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

作为附注，当当前内容页面大于屏幕所能显示的大小时，可以垂直滚动。水平滚动是不可能的。

很难解释，我正在尽我最大的努力，但我希望有人能帮助我。

Answer 1

这真是太有趣了！也许使用em单位会对你有所帮助。这是一个巧妙的小把戏。

1-在父容器上将font-size设置为100%。

2-在所有的子元素中，对所有的尺寸、填充、边距、边框、字体大小等都使用ems。

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

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

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

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

文本将缩放边框大小将缩放边框半径将缩放尺寸、填充、页边距

这很棒。