Css 使页面及其内容变小

我有一个名为wrapper的div，它使用以下CSS：

   .wrapper {
            width: 960px;
            min-height: 720px;
            margin: 0 auto;
            text-align: center;
            background: url(images/bg-light.png) no-repeat;
            padding-top: 20px;
            }

它位于车身内。正文的CSS：

   body { 
        background: #232323 url(images/bg.png) repeat;
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

有HTML5元素以块级别显示。以下是他们的CSS：

header, nav, article, section, aside, footer, address {  
        display: block;  
        } 

我想把整页缩小一些。我的意思是，如果你在浏览器中点击Ctrl/-键。

---

那么，减少页面大小的最佳方法是什么？现在如何将其显示为其大小的67%（例如）。

不要在px中设置大小，这会使元素大小固定。您可以使用%，em等。然后对于外部div或整个主体，您可以设置您想要的大小，可能是px。因此，当您更改最外层div的大小时，所有内容都将自动调整大小。

这听起来像是CSS转换的工作：

.SmallerPage{
   -webkit-transform:scale(0.67);
   -moz-transform:scale(0.67);
   -ms-transform:scale(0.67);
   transform:scale(0.67);
   -ms-transform-origin:0 0;
   -webkit-transform-origin:0 0;
   -moz-transform-origin:0 0;
   transform-origin:0 0;}

在此中，我使用jQuery向正文中添加或删除此类：

$(document).ready(function() {

    $('#DoResize').click(function () {

        if ($('html').hasClass('SmallerPage')) {

            $('html').removeClass('SmallerPage');

        } else {

            $('html').addClass('SmallerPage');            
        }
    }); 
});

---

这在IE8及以下版本中不起作用，因为它不支持转换。如果您想调整整个页面的大小，只有transform会这样做；否则，您需要CSS切换，以使其在IE8及以下版本中工作。

如果只是为了模式或其他效果，这是我能想到的您为什么要这样做的唯一原因

您可以使用非交叉浏览器

body{
    -webkit-transform: scale(0.67);
       -moz-transform: scale(0.67);
            transform: scale(0.67);
}

---

您可以改用jQuery 2d transform插件，它安全且跨浏览器
你应该写：

$('your_contents').css("scale",0.5);

或者，您可以通过以下方式设置内容的动画：

$('your_contents').animate({"scale":1});

---

这项工作没有什么小问题，但我想我必须修改整个CSS，使用百分比而不是像素。这很好。我会选择这个，但问题是div中有一个图像。如果我更改了%s，它们将无法正确调整大小。