缩小页面 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%);
}