Erstellen einer Art CMS, in dem sich der Benutzer in Feldern bewegen kann, um ein Seitenlayout zu erstellen (ohnehin Grundidee).
Ich möchte den eigentlichen Inhalt aus der Datenbank abrufen und die "Seite" erstellen, aber sie soll in einem Maßstab von 50% angezeigt werden.
Mir ist klar, dass ich zwei Sätze von CSS haben könnte - einen für die eigentliche Titelseite und einen für das Admin-Tool, und einfach alles entsprechend verkleinern, aber das scheint ein Problem zu sein.
Ich hatte gehofft, es könnte eine Art Abfrage oder CSS geben oder etwas, das es mir ermöglicht, ein Div zu füllen und ihm die Eigenschaften (?) Von 50% zu geben.
javascript
jquery
css
scale
Dave
quelle
quelle
Antworten:
Sie können einfach die Zoom- Eigenschaft verwenden:
#myContainer{ zoom: 0.5; -moz-transform: scale(0.5); }
Wobei myContainer alle Elemente enthält, die Sie bearbeiten. Dies wird in allen gängigen Browsern unterstützt.
quelle
zoom
in allen gängigen Browsern unterstützt, warum ist-moz-transform: scale(0.5);
erforderlich? Oder sind beide Anweisungen erforderlich, um alle Browser abzudecken?zoom
, daher gehe ich davon aus, dass dies der Grund-moz-transform
ist.transform-origin: 0 0
oder-moz-transform-origin: 0 0
beheben Sie es!Diese browserübergreifende Bibliothek scheint sicherer zu sein - nur Zoom und Moz-Transformation decken nicht so viele Browser ab wie die Skala () von jquery.transform2d.
http://louisremi.github.io/jquery.transform.js/
Zum Beispiel
$('#div').css({ transform: 'scale(.5)' });
Aktualisieren
OK - ich sehe, dass die Leute dies ohne Erklärung ablehnen. Die andere Antwort hier funktioniert in alten Safari-Versionen (mit Tiger) nicht, und in einigen älteren Browsern funktioniert sie nicht konsistent. Das heißt, sie skaliert die Dinge, aber auf eine Weise, die entweder sehr pixelig ist oder die ändert Position des Elements auf eine Weise, die nicht mit anderen Browsern übereinstimmt.
http://www.browsersupport.net/CSS/zoom
Oder schauen Sie sich einfach diese Frage an, von der diese wahrscheinlich nur ein Betrug ist:
Komplette Stile für den browserübergreifenden CSS-Zoom
quelle