Question

我有一个网站，当我 zoom out my browser to 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">

Viewport

但是您实际上可以使用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% 的缩放比例进行有效渲染，但使用 50% 以 transform 缩放。您还需要将 transform-origin 设置为 top left 以避免 scale 转换将主体的左上角移离窗口的左上角。

这可以用于任意缩放级别，只需对 scale 使用该比例，对 width/height 使用该比例的倒数。

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

缩小页面CSS

2 个答案: