TYPO3 - Responsive Design

Screens

Bildschirmgrößen für Media Queries

Bildschirmauflösungen der verschiedenen Geräte: Desktop meist mindestens 1024 x 768

Jede Browser- / Betriebssystem Kombination rendert hier etwas unterschiedlich. Eine Breite von 1003 Pixeln wird bei allen erreicht.

IPad Bildschirmbreiten

Querformat: 1024 Pixel

Hochformat: 768 Pixel

IPhone Bildschirmbreite

Hochformat: 320 Pixel

Die Retina Displays nutzen die logische Pixelanzahl und werden von den normalen Media Queries für IPad und IPhone unterstützt. Um explizit diese Displays anzusprechen, z.B. für Bilder in höhere Auflösung, muss die Query um die Bedingung webkit-min-device-pixel-ratio: 2 ergänzt werden. Aufgrund dieser Bildschirmbreiten haben sich folgende MediaQueries durchgesetzt:

Smartphones:

@media only screen and (max-device-width: 480px) 

IPad (Hochformat)

@media only screen and (min-device-width: 480px) and (max-device-width: 768px)

Desktop, StandardCSS

Das Layout sollte bei einer Bildschirmbreite von max 1003 Pixeln komplett angezeigt werden (Bilder werden nicht skaliert). Diese Angaben werden auch im weiterem Verlauf des Tutorials benutzt.

Bilder

Header Bilder

CSS3 Eigenschaft background-size

Problem Höhe -> zwei Container die mit z-index und position übereinander fixiert werden. Dadurch kann im hinterem Container der Header als normales Bild mit height: 100%, width: 100% eingesetzt werden, im Container darüber können wir später das Infomenü oder ein Logo plazieren.

Inhaltsbilder

TYPO3 rendert .csc-textpic-intext-right: umschließt den ganzen Text-Bild-Block und bestimmt die Bildanordnung. .csc-textpic-imagewrap: umschließt das Bildelemenet (Bild und ggf. Bildbeschreibung) .csc-textpic-text: umschließt den Textblock

Nach Änderung der HTML Seite kommen wir nur zu CSS: Unser Bildelement, diesmal mit der Klasse csc-textpic-image, soll weiterhin rechts floaten. Damit es in der Größe skaliert geben wir ein Breite von 45% mit, das entspricht in etwa unserem altem Bildformat von 300 Pixeln.

.csc-textpic-intext-right .csc-textpic-image {
    float: right;
    width: 45%;
    margin: 15px 0 0 20px;
}