TYPO3 - Responsive Design

Screens

Bildschirmgrößen für Media Queries

Bildschirmauflösungen der verschiedenen Geräte:

DESKTOP meist mindestens 1024 x 768  -> je nach Browser / OS aber mind. 1003px verfügbar.
iPad 1&2 1024px * 768 px
iPhone * 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.

folgende Breakpoints bieten sich an:

Smartphones:

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

IPad (Hochformat)

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

Evtl. für kleine Tablets und Bildschirme / Browserfenster

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

Desktop, StandardCSS

Layout komplett bei max 1003 Pixeln (Bilder werden nicht skaliert).

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;
}