Responsives Webdesign

[Kurt]

Ich befasse mich gerade mit responsiven Webdesign. Hierbei bin ich, unter anderem auf dieses Seite gestoßen:

http://www.be-responsive.de/

Hier kann man sich eine beliebige Seite in verschiedenen Größen Ansehen. Aber Sie wir anscheinend nicht echt in den verschiedenen Größen geladen, sondern in den einzelnen Vorschaubilder sind Inlineframes.

Doch irgendwie sind es nicht nur Inlineframe, da die einzelnen Zeichen, Buchstaben auch verkleinert sind, was bei nur zusammenschieben. Um es auf den Punkt zu bringen, mich würde das WIE interessieren, wie das gemacht wurde. Vielleicht kann mir jemand weiterhelfen!

[Matthias Scharwies]

Das geht mit CSS ganz einfach:

.tester .panorama .device-tablet-portrait {
    height: 872px;
    left: 5%;
    top: 15%;
    width: 673px;
}
.tester .panorama .device {
    display: block;
    overflow: hidden;
    position: absolute;
    transform: scale(0.5);
    transform-origin: left top 0;
}

Ich habe mir den Quelltext mit Firebug angeschaut:

Das div um den iframe hat eine feste Breite und Höhe, dieses wird dann mit CSS-transform auf die halbe Größe skaliert.

Schönes Wochenende Matthias Scharwies

[Kurt]

Das div um den iframe hat eine feste Breite und Höhe, dieses wird dann mit CSS-transform auf die halbe Größe skaliert.

Es verkleinert um die Häfte, aber ich verstehe nicht um die Hälfte von was.

.device-tablet-portrait {
    height: 972px;
    left: 5%;
    top: 15%;
    width: 1000px;

	background:#ff0000;
}

In diesem Fall wäre es doch um die Hälfte von width: 1000px;, aber das stimmt irgendwie nicht.

https://jsfiddle.net/yz1pnq7z/

[JürgenB]

Hallo Kurt,

Hier kann man sich eine beliebige Seite in verschiedenen Größen Ansehen.

hast du beim Firefox schon mal Strg Shift M gedrückt?

Der IE und der Chrome haben Emulatoren.

Gruß Jürgen

[Matthias Apsel]

Hallo JürgenB,

hast du beim Firefox schon mal Strg Shift M gedrückt?

Der IE und der Chrome haben Emulatoren.

Erreichbarkeit: siehe Wiki

Bis demnächst
Matthias