4

我有一个名为 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;
        }

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

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

我正在尝试使整个页面更小。我的意思是，如果您在浏览器中单击 Ctrl/-。那么减小页面大小的最佳方法是什么？现在如何将其显示为其大小的 67%（例如）。

4

4 回答 4

3

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

您可以使用非跨浏览器

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

文档

于 2013-07-27T13:20:45.437 回答
1

这听起来像是 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 及更低版本中不起作用，因为它不支持转换。如果你想调整整个页面的大小，只有 transform 会这样做；否则你需要 CSS 切换以使其在 IE8 及以下版本中工作。

于 2013-07-27T13:20:43.993 回答
0

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

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

或者您可以通过以下方式为您的内容制作动画

$('your_contents').animate({"scale":1});
于 2013-07-27T13:45:28.007 回答
0

不要以 px 为单位设置大小，这会使元素的大小固定。你可以使用%、em等。然后对于外部div或者整个body，你可以设置你想要的大小，也许是px。因此，当您更改最外层 div 的大小时，所有内容都会自动调整大小。

于 2013-07-27T13:13:38.730 回答