缩小页面CSS

Question

我有一个网站，当我将浏览器缩小到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>

Answer 2

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

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

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