做一個頁面，其內容更小

我有一個名爲包裝這個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

做一個頁面，其內容更小

回答

相關問題