TYPO3 - Responsive Design

Media Queries

Siehe: Media Queries

Screens

Ansätze

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).

Weiteres Beispiel

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
 
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
 
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
 
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
 
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
 
/* highres devices */
@media screen and (-moz-min-device-pixel-ratio:1.5),
	screen and (-o-min-device-pixel-ratio:3/2),
	screen and (-webkit-min-device-pixel-ratio:1.5),
	screen and (min-device-pixel-ratio:1.5){}

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 Webdesign)

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