TYPO3 - Responsive Design

Media Queries

Siehe: Media Queries

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

Noscript Ansatz (siehe auch Responsive Design)

#adaptive images lib for TYPO3
lib.adaptive-images = COA
lib.adaptive-images {
1 = TEXT
1.value = <figure class="csc-textpic-imagecolumn###CLASSES###"><noscript
10 = IMG_RESOURCE
10 {
file.import.current = 1
file.maxW = 480
file.override.data = {$styles.content.imgtext.maxW}
stdWrap.noTrimWrap = | data-small="|" |
}
20 = IMG_RESOURCE
20 {
file.import.current = 1
file.maxW = {$styles.content.imgtext.maxW}
file.override.data = register:maxImageWidth
stdWrap.noTrimWrap = | data-large="|" |
}
1000 = TEXT
1000.value = >|</noscript>###CAPTION###</figure>
}