做一个页面，其内容更小

我有一个名为包装这个CSS DIV：做一个页面，其内容更小

.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％（例如）。

来源

2013-07-27 user1410644

不要在px中设置大小，这会使元素的大小保持不变。你可以使用％，em等。然后对于外部div或全身，你可以设置你想要的大小，也许是px。所以，当你改变最外面div的大小时，所有内容都会自动调整大小。

来源

2013-07-27 13:13:38

这很好。我会用这个，但问题是div中有图像。如果我更改％，他们将不会正确调整大小。 – user1410644

这听起来像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和IE8下工作。

来源

2013-07-27 13:20:43 frenchie

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

可以使用非跨浏览器

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

Documentation

来源

2013-07-27 13:20:45 iConnor

这样做的工作有一些小故障，但我想我将不得不修改整个CSS使用百分比，而不是像素。 – user1410644

您可以使用jQuery 2D变换插件相反，它是安全的和跨浏览器
只是你应该写：

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

或者您可以通过动画制作您的内容

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

来源

2013-07-27 13:45:28

做一个页面，其内容更小

回答

相关问题