如何根据缩放，分辨率和windowsize正确缩放网页？

Question

我正忙于开发网络应用，但我似乎无法找到缩放所有项目的正确方法，因此它适合屏幕。

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

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

正如旁注，当当前内容页面大于屏幕可显示时，可以垂直滚动。水平滚动是不可能的。

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

Answer 1

这很有趣！也许与em单位合作会帮助你。这是一个巧妙的小技巧。

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

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

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

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

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

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

文字会缩放 边框尺寸将缩放 边界半径将缩放 尺寸，填充，边距将缩放

这是neato。