Question

我有一个带有这个CSS的包装器：

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

位于体内。 Body的CSS：

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

HTML 5元素以块级显示。这是他们的CSS：

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

我正在努力缩小整个页面。我的意思是，如果您在浏览器中单击Ctrl / - 。那么缩小页面大小的最佳方法是什么？现在如何将它显示为67％（例如）它的大小。

Answer 1

如果它仅仅是为了模态或其他东西的效果，那么这就是我能想到你为什么要这样做的唯一原因。

您可以使用非跨浏览器

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

Documentation

Answer 2

这听起来像是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;}

在 jsFiddle 中，我使用jQuery在主体中添加或删除此类：

$(document).ready(function() {

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

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

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

        } else {

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

这在IE8及以下版本中无效，因为它不支持转换。如果你想调整整个页面的大小，只有转换会这样做;否则你需要CSS切换才能使它在IE8及以下版本中运行。

Answer 3

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

Answer 4

您可以使用jQuery 2d转换插件，它是安全且跨浏览器的你应该写一下：

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

或者您可以通过

为内容制作动画

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

使页面及其内容更小

4 个答案: