2

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

在此处输入图像描述

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

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

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

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

4

1 回答 1

0

That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.

1 - Set the font-size to 100% on your parent container.

2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.

3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.

4 - Setup a window resize event. 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.

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.

Text will scale Border size will scale Border radius will scale Dimensions, padding, margins will scale

It's neato.

于 2013-02-25T03:09:58.667 回答