html - 缩小页面 CSS

Question

我有一个网站，当我 zoom out my browser to 50% .但它在正常尺寸上非常糟糕(100%)。我已经在 CSS 上使用了变换和缩放，但不是我想要的 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>