简体繁体 English

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

[英]How to properly scale a webpage, according to zoom, resolution and windowsize?

原文 2012-11-15 14:19:14 3 1 javascript/ jquery/ html/ css

I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen. 我正在忙于开发Web应用程序，但似乎找不到正确的方法来缩放所有项目以使其适合屏幕。

在此处输入图片说明

As you can see on the picture, the grey bars are menu and need to stay in position. 如您在图片上看到的，灰色条是菜单，需要保持在原位。 The content in the middle (blue block including the white background) needs to move left and right, but also up and down. 中间的内容（包括白色背景的蓝色块）需要左右移动，也需要上下移动。 Resizing the window, zoom and whatever else should be taken into account. 调整窗口大小，缩放和其他任何因素都应考虑在内。 My current technique fails lots of times, so I was hoping if any of you knew some good technique. 我目前的技术失败了很多次，所以我希望你们中的任何人都知道某种好的技术。

So as I said, the content needs to move up and down, left and right. 因此，正如我所说，内容需要左右移动。 The parent div of all pages is the same width as all pages are together. 所有页面的父div的宽度与所有页面在一起的宽度相同。 So one page should have the correct window width. 因此一页应该具有正确的窗口宽度。 Same goes for height, but there are just 2 pages on the horizontal axis. 高度也一样，但水平轴上只有2页。 Currently I'm adjusting size using JavaScript/JQuery. 目前，我正在使用JavaScript / JQuery调整大小。

Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. 就像旁注一样，当当前内容页面大于屏幕可以显示时，可以垂直滚动。 Horizontal scrolling is not possible. 水平滚动是不可能的。

Very hard to explain, I'm doing my best, but I hope someone can help me. 很难解释，我正在尽力而为，但我希望有人能帮助我。

1 个解决方案

That's a lot fun! 很好玩！ Perhaps working with em units will assist you. 也许与em单位合作会为您提供帮助。 It's a neat little trick. 这是一个巧妙的小把戏。

1 - Set the font-size to 100% on your parent container. 1-在父容器上将字体大小设置为100％。

2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc. 2-在所有子元素中，将em用于所有尺寸，填充，边距，边框，字体大小等。

3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use. 3-在Javascript中，当页面加载时，捕获浏览器尺寸并将其保存到变量中以备后用。

4 - Setup a window resize event. 4-设置窗口调整大小事件。 When the window resizes, get the new browser dimensions. 窗口调整大小后，获取新的浏览器尺寸。 Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage. 现在，一些基本数学将使您能够将新的浏览器尺寸与原始的浏览器尺寸进行比较-并获得百分比。

5 - Still in the resize event, set that new percentage to the font-size of the parent element. 5-仍然在resize事件中，将该新百分比设置为父元素的字体大小。

You can set this up with just your center container - or whatever. 您可以仅使用中心容器或任何其他容器进行设置。 Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window. 具有font-size属性（在ems中定义）的主容器的所有子元素都将随浏览器窗口自动缩放。

Text will scale Border size will scale Border radius will scale Dimensions, padding, margins will scale 文本将缩放边框大小将缩放边框半径将缩放尺寸，填充，边距将缩放

It's neato. 它是整洁的。