缩小页面 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 进行缩放（但我不建议将其用于整个页面）：

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

/* 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 */
}

Answer 2

您可以通过将主体的width/设置height为 来有效地以 50% 缩放进行渲染200%，但按50%比例设置为transform。您还需要设置transform-origin以top left避免scale转换将主体的左上角移离窗口的左上角。

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

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