Gleichmäßige Anpassung

Question

Also ich versuche herauszufinden, wie ich alle meine Webseite Größe ändern könnte, wenn Sie im gleichen Verhältnis vergrößern oder verkleinern. Ich kann nicht herausfinden, wie das geht, aber hier ist ein kleiner Test, den ich in ein paar Minuten erstellt habe.

https://jsfiddle.net/cejnkx4h/1/

So wie können Sie in dieser sehen, wenn die Browser/Leinwand alle Änderungen der Textgröße und -material ändert Anteil. Ich möchte, dass der Benutzer in der Lage ist, zu vergrößern, um Beeinträchtigungen zu berücksichtigen, aber ich möchte, dass die gesamte Webseite im gleichen Verhältnis heranzoomt, nicht nur bestimmte Elemente wie der Text. Wenn jemand von euch mir helfen kann, würde ich das sehr schätzen.

body, 
 
html { 
 
    margin: 0; 
 
    background-image: url("https://www.hdwallpapers.in/walls/blur_colors-wide.jpg"); 
 
    background-position: cover; 
 
    background-size: 100%; 
 
    background-attachment: fixed; 
 
    min-width: 1000px; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.bg { 
 
    width: 60%; 
 
    margin-left: 20%; 
 
    background-color: grey; 
 
    border: thick solid black; 
 
    height: 100%; 
 
} 
 

 
#right { 
 
    width: 45%; 
 
    vertical-align: baseline; 
 
    border: thick solid black; 
 
} 
 

 
#left { 
 
    width: 45%; 
 
    float: left; 
 
    font-size: 16pt; 
 
    color: black; 
 
    padding-top: 20px; 
 
} 
 

 
.format { 
 
    width: 85%; 
 
    margin-left: 10%; 
 
    overflow: hidden; 
 
    padding-top: 5%; 
 
    padding-bottom: 10%; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="bg"> 
 
    <div class="format"> 
 
    <div id="left"> 
 
     <p> 
 
     Gaming Pc 
 
     <br/>$1500 
 
     </p> 
 
    </div> 
 
    <div id="right"> 
 
     <img src="https://www.cyberpowerpc.com/images/cs/smraidmax/blk_400.png" width="100%" </div> 
 
    </div> 
 
    </div>

Answer 1

Sie können CSS-Transformation verwenden, um die Seite proportional zu skalieren.

transform: scale(1); 

Etwas Ähnliches. Wo Maßstab 1 bedeutet 100%. Sie können es auf etwa 0,5 für 50% oder 1,1 für 110% setzen.

Hoffe, das hilft.