縮小頁面 CSS

Question

我有一個網站，當我將瀏覽器縮小到 50%時，它可以完美運行。 但它在正常尺寸（ 100% ）上非常糟糕。 我已經在 CSS 上使用了 transform 和 zoom 但不是我想要的CSS 。 由於某種原因，我無法減少字體或圖像。 我想要的只是讓這個頁面看起來像我將瀏覽器縮小 50%。

感謝你的幫助。

 <style type="text/css"> .navbar-brand{ position: absolute; width: 100%; left: 0; text-align: center; margin:0 auto; } .navbar-toggle { z-index:3; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: block; } .dropdown-content { display: none; position: absolute; right: 0; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } @media (min-width: 1025px) { html { /* -webkit-transform: scale(2); -moz-transform: scale(2); transform: scale(2);*/ /* transform: scaleX(1) scaleY(.5);*/ } } @media (max-width: 600px) { #judul{ visibility: hidden; display: none } #menu{ display: none; } #menu-content{ display: block; position: relative; } #logo{ visibility: hidden; display: none; } </style>

Answer 1

您可以為此使用非 css 解決方案：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

視口

但是您實際上可以使用 CSS 進行縮放（但我不建議將其用於整個頁面）：

 /* you can apply this on body aswell */ .zoomedElement { background-color: #CCF; zoom: 300%; } .scaledElement { background-color: #FAC; transform: scale(1.2); /* scales in all directions, probably not what you want but worth mentioning */ }

 <div class="zoomedElement"> <h6>Heading Zoomed</h6> Some text... </div> <div class="scaledElement"> <h6>Heading Scaled</h6> Some text... </div>

Answer 2

您可以通過將主體的width / height為200%以 50% 縮放有效渲染，但使用transform以50%縮放。 您還需要將transform-origin設置為top left以避免scale變換將主體的左上角移離窗口的左上角。

這可以用於任意縮放級別，只需使用比例的scale ，以及width / height比例的倒數。

body {
  width: 200%;
  height: 200%;
  transform-origin: top left;
  transform: scale(50%);
}