0

在为客户完成网站设计后，我意识到一切都很小。在尝试了浏览器缩放后，我发现放大 10% 可以解决很多问题！问题是，我不知道如何将所有内容（div 大小、图像大小、文本大小等）调整为 110%。

任何想法表示赞赏。我宁愿在 CSS 中完成这一切。

编辑 -

哈哈，好吧，伙计们，我想我会进去，实际上花一些时间改变尺寸。这不是我想做的，但我想这是我唯一真正的选择。多谢你们 ：）

4

3 回答 3

3

正确的方法是重新设计您的网站。如果你的设计正确，这应该很容易。一些忠告：

  • 页面宽度：增加最外层容器的宽度，子元素宽度应扩大以填充空间，除非您设置了硬编码的绝对宽度。在这些情况下，请调整px以适应。

  • 字体大小：如果你使用了emor%值，就增加font-sizeof body（其他元素会继承这个基本字体大小）。如果您使用px了字体大小，则必须增加它们。

我认为您深知通过 javascript 或 IEzoom属性“缩放”页面不是正确的方法，您正在避免重新设计。甚至像这样的东西body{ transform:scale(1.1); }也会让你的图像在缩放/拉伸时看起来很糟糕，并且由于它是 CSS3，因此将缺乏支持，并且在测试了这个想法之后，它似乎能够将内容缩放到视口/可见区域之外。

如果您希望这是永久更改，那么正确的方法是重写您的 CSS。

于 2012-05-05T20:13:45.707 回答
2

我建议您以其他方式解决问题（将字体大小设置为 10px 等）

但是，如果您真的想这样做，我建议您参考我最近对类似问题的回答。小心因为FF不支持这个，因为FF不允许通过js缩放！

用 JavaScript 模拟浏览器缩放

[你去：][1]

利用：

document.body.style.zoom=1.0;this.blur();

1.0 表示 100%

150% 将是 1.5 1000% 将是 10.0

this.blur() 意味着光标，也许你选择了一个输入字段，失去了每个选择项的焦点。

或者：

您可以使用 css3 元素 [zoom][2] ([Source][3])

[Firefox 不允许][4] 使用浏览器进行缩放，因为您无法通过 javascript 或 sth 访问用户属性。

因此，您可以只使用一些允许缩放（CSS3：缩放，如上所述）或增加文本大小的 CSS 样式！例如，您可以通过包含不同的 CSS 文件来做到这一点。但是在这里你有“跳跃”的问题，因为样式化的 css 元素（浮动等）必须“交互”，实际上它们的属性不同。

我在上面发布的缩放在 Chrome 和 IE8+ 中运行良好（如上所述不支持 FF）

[1]： http ://www.perlunity.de/javascript/scripts/javascript_0314_main.shtml [2]：http ://www.css3.com/css-zoom/ [3]： 我可以放大网页吗像 IE 或 Firefox 一样，使用编程？ [4]： http ://www.mozilla.org/projects/security/components/signed-scripts.html

于 2012-05-05T20:02:53.077 回答
1

在所有有价值的浏览器中，这会将屏幕上的所有内容调整为 200% 的比例：

body {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}
于 2013-03-28T14:46:55.280 回答