Eine Technik für die Reaktionsfähigkeit mit CSS-Transformation Skala

Question

Ich frage mich, wie man eine Website reagiert mit CSS-Skala-Eigenschaft.

Grundsätzlich ist der Code würde die Fensterbreite erfassen und die Elemente entsprechend skaliert, aber es gibt ein Problem, wenn Sie verwenden:

transform:scale(1.3); 

für exemple, das Element, das der Maßstab angelegt wird seine CSS Größe mantains Also, ich könnte mir vorstellen, dass es unmöglich ist, die tatsächliche Größe des Elements auf dem Bildschirm mit Javascript zu erfassen, was es unmöglich macht zu berechnen, wie viel es skalieren sollte.

Irgendwelche Ideen, wie man daran arbeitet? Ist es überhaupt möglich, nach Fenstergröße zu skalieren?

Answer 1

Es ist möglich, mit CSS nach Fenstergröße zu skalieren. maximale Breite: 50%; würde das Element bei 50% der Browserbreite halten.

Führen Sie das Code-Snippet auf der ganzen Seite aus und ändern Sie die Größe Ihres Browsers.

Haben Sie das gemeint? Vergib mir, wenn ich es falsch verstanden habe. :)

.max-width { 
 
    height: 100px; 
 
    background-color: blue; 
 
    max-width: 50%; 
 
}

<div class="max-width"> 
 

 
</div>

Answer 2

Der richtige Weg von einem adapar div an die Bildschirmauflösung ist mit Prozent oder mit den Eigenschaften des "max-width" und "min-width ".

Weitere comodida empfehlen bootstrap