放大我的网站10%

Question

在为一位客户完成网站设计后，我意识到所有的东西都有点小。在试用了浏览器的缩放功能后，我发现放大10%的功能修复了很多问题！问题是，我不知道如何调整所有内容的大小(div大小、图像大小、文本大小等)。到110%。

任何想法都是值得感谢的。我更喜欢在CSS中做这一切。

编辑-

哈哈，好了，伙计们，我想我还是进去，花点时间改变一下尺寸吧。这不是我想做的，但我想这是我唯一真正的选择。谢谢大家:)

Answer 1

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

• 页面宽度:增加最外层容器的宽度，子元素宽度应该扩展以填充空间，除非您设置了硬编码的绝对宽度。在这些情况下，将px调整为accommodate.
• Font大小:如果您使用了em或%值，只需增加font-size of body (其他元素将继承此基本字体大小)。如果您使用px作为字体大小，则必须增大字体大小。

我想你深知，通过javascript或IE的zoom属性“缩放”页面不是正确的方法，而且你正在避免重新设计。即使像body{ transform:scale(1.1); }这样的东西在缩放/拉伸时也会让你的图像看起来很糟糕，因为它是CSS3，所以缺乏支持，而after testing this idea似乎能够将内容缩放到视口/可见区域之外。

如果你想让它永久改变，正确的方法是重写你的CSS。

Answer 2

我建议你用另一种方式来解决这个问题(设置字体大小为10px等等)

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

imitate browser zoom with JavaScript

你可以这样做：

使用：

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

1.0意味着100%

150%等于1.5 1000%等于10.0

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

或者：

可以使用css3元素缩放(源)

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

所以你可以使用一些CSS样式来缩放(CSS3: zoom，如上所述)或者增加文本大小！例如，您可以通过包含不同的CSS文件来执行此操作。但是在这里你有“跳跃”的问题，因为样式的css元素(浮动等)必须“交互”不同的属性。

我在上面发布的缩放效果在Chrome和IE8+中运行良好(不支持上面提到的FF)

1：http://www.perlunity.de/javascript/scripts/javascript_0314_main.shtml 2：http://www.css3.com/css-zoom/ 3：Can I zoom into a web page like IE or Firefox do, using programming? 4：http://www.mozilla.org/projects/security/components/signed-scripts.html

Answer 3

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

body {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}