Responsive Webdesign: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 1: | Zeile 1: | ||
== Siehe auch == | == Siehe auch == | ||
[[TYPO3 - Responsive Design]] | [[TYPO3 - Responsive Design]] | ||
| + | |||
[[Webdesign - Verschiedenes]] | [[Webdesign - Verschiedenes]] | ||
| + | == Links == | ||
| + | http://typo3blogger.de/responsive-design-mit-typo3/ | ||
== Media Queries == | == Media Queries == | ||
Verschiedene Geräte unterscheiden mit [[Media Queries]] | Verschiedene Geräte unterscheiden mit [[Media Queries]] | ||
== Adaptive Images == | == Adaptive Images == | ||
| + | Quellen: | ||
| − | == | + | http://t3n.de/news/responsive-webdesign-typo3-nutzt-446306/ (2013-12) |
| + | === 1. Ansatz - Relative Breitenangabe === | ||
| + | img { | ||
| + | max-width: 100%; | ||
| + | height: auto; | ||
| + | } | ||
| + | |||
| + | Nachteil: Es wird für alle Screens die gleiche Datenmenge geladen. | ||
| + | |||
| + | === 2. Ansatz - noscript === | ||
| + | Bilder werden im noscript Teil referenziert. Der JavaScript fähige Browser lädt diesen Teil nicht. Danach kann man mit JavaScript zugreifen (hier mit jQuery) | ||
| − | + | HTML | |
| + | <pre> | ||
| + | <noscript data-large="Koala.jpg" | ||
| + | data-small="Koala-small.jpg" data-alt="Koala"> | ||
| + | <img src="Koala-small.jpg" alt="Koala" /> | ||
| + | </noscript> | ||
| + | </pre> | ||
| + | JavaScript | ||
| + | <pre> | ||
| + | $('noscript[data-large][data-small]').each(function(){ | ||
| + | var $this = $(this); | ||
| + | var src = screen.width >= 480 ? $this.data('large') : $this.data('small'); | ||
| + | $('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($this); | ||
| + | }); | ||
| + | </pre> | ||
Version vom 10. Dezember 2013, 15:55 Uhr
Siehe auch
Links
http://typo3blogger.de/responsive-design-mit-typo3/
Media Queries
Verschiedene Geräte unterscheiden mit Media Queries
Adaptive Images
Quellen:
http://t3n.de/news/responsive-webdesign-typo3-nutzt-446306/ (2013-12)
1. Ansatz - Relative Breitenangabe
img { max-width: 100%; height: auto; }
Nachteil: Es wird für alle Screens die gleiche Datenmenge geladen.
2. Ansatz - noscript
Bilder werden im noscript Teil referenziert. Der JavaScript fähige Browser lädt diesen Teil nicht. Danach kann man mit JavaScript zugreifen (hier mit jQuery)
HTML
<noscript data-large="Koala.jpg" data-small="Koala-small.jpg" data-alt="Koala"> <img src="Koala-small.jpg" alt="Koala" /> </noscript>
JavaScript
$('noscript[data-large][data-small]').each(function(){
var $this = $(this);
var src = screen.width >= 480 ? $this.data('large') : $this.data('small');
$('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($this);
});
