-1

在此页面上，请注意在拖动窗口时所有内容的大小都是错误的。

我希望“iframe”在放大或缩小时保持 1.778（640*360、1280*720 等）的比率。（当用户将窗口拖出时，将其放大。当用户将窗口拖入时，将其按比例缩小。）

我希望页面周围的“边框”始终为 8px x 8px。（使用边距的问题是窗口大小增加并且用户必须滚动。-出于我的目的，我不希望这种情况发生。）

最后，文本需要随着窗口的大小上下变化。（目前我正在使用 '%' 来实现这一点，但显然'%' 在字体大小的上下文中意味着“将字体大小设置为父元素字体大小的百分比。”所以我需要一个不同的靠近这里。）

4

2 回答 2

1

您需要使用 jquery 将 resize 事件绑定到窗口，并对要重新缩放的元素进行适当的更改：

$(window).resize(function() {
    var currentwidth = $(this).css('width'); //just one way to get the window width
    var scaledwidth = parseInt(currentwidth) * 0.75; //calculate a new width
    $('#iframeId').css('width', scaledwidth); //one way to set an element's width (iframe in this case)

/* Do your other element re-sizing here. */
}

该行var scaledwidth = parseInt(currentwidth) * 0.75;用于parseInt从 currentwidth 中去除“px”。

于 2012-12-15T15:43:12.150 回答
1

编辑：

如果只关心元素大小，将body元素的大小设置为width: 100%; 并以百分比而不是像素设置所有子元素的大小。然后你什么都不用做：你的布局会在不同尺寸的屏幕上自动改变。

或者，如果您只支持现代浏览器（即在手机和平​​板电脑上），您可以使用简单的 CSS3 行：transform: scale()。然后，您可以创建所需尺寸的 iFrame（或其他对象），并根据需要放大或缩小它。

见 http://www.w3schools.com/cssref/css3_pr_transform.asp

或者，您可以在 ems 或 rems 中指定所有字体大小、元素大小、填充和边距。然后你只需要改变你的 em 或 rem 基数，所有元素都会相应地缩放。

要使用 scale()、ems 或 rems，您有两种选择：

(1) JavaScript：在您的 Window 对象上附加一个调整大小的侦听器，以在屏幕大小发生变化时设置 body 元素的属性。

(2)针对不同的屏幕尺寸使用不同的CSS文件。唯一的区别在于正文元素规则。请参阅： http ://css-tricks.com/resolution-specific-stylesheets/

于 2012-12-15T16:14:13.257 回答