Das reaktionsschnelle oder adaptive Webdesign für verschiedene Geräte sorgt dafür, dass unsere Designs perfekt auf jeden Gerätebildschirm mit Internetverbindung passen.
Durch die Verwendung von Medienabfragen in CSS3 können mit CSS3-Medienabfragen reaktionsschnelle Designs erstellt werden.
Eine Medienabfrage besteht aus einem Medientyp und mindestens einer Abfrage, die Stylesheets anhand von Medienmerkmalen wie Breite, Höhe und Farbe einschränkt. Medienabfragen, die in CSS3 hinzugefügt wurden, ermöglichen die Anpassung der Inhaltspräsentation an einen bestimmten Bereich von Ausgabegeräten, ohne dass der Inhalt selbst geändert werden muss.
Medienabfragen bestehen aus einem Medientyp und einem oder mehreren Ausdrücken, die Merkmale des Mediums implizieren und als wahr oder falsch aufgelöst werden. Das Ergebnis der Abfrage ist wahr, wenn der in der Medienabfrage angegebene Medientyp mit dem angezeigten Gerätetyp übereinstimmt und alle Ausdrücke in der Medienabfrage wahr sind. Wenn eine Medienabfrage wahr ist, werden die entsprechenden Stylesheets oder Stilregeln entsprechend den normalen Kaskadenregeln angewendet.
<! - CSS-Medienabfrage für eine maximale Auflösung von 800px -> <link rel = "stylesheet" media = "(maximale Breite: 800px)" href = "eestilos.css" /> <! - CSS-Medienabfrage für eine maximale Auflösung von 480px -> <style> @media (maximale Breite: 480px) { .facet_sidebar { Anzeige: keine; } } </ style>
Diese Reaktionstechnik kann mit allen unseren Dateien eines Webs verwendet werden, auch wenn der Multimedia-Inhalt, um unser Web praktischer und für alle Geräte zugänglicher zu machen, dann können wir unsere Videos auch ansprechbar machen, dh selbst anpassend oder je nach Gerät anpassbar. aussteigen
Hierfür haben wir FitVids.js, ein Plugin, mit dem jedes reaktionsfähige Video erstellt wird. Es passt sich perfekt und automatisch an die Größe des Containers oder Ausgabegeräts an, was für das Webdesign sehr praktisch ist, da der Inhalt perfekt auf Handys angezeigt werden kann Smart und Tablets.
Sie müssen jQuery 1.7 oder höher und FitVids.js in das Design Ihrer Webseite einbeziehen und den Container mit Videos mit fitVids () ausrichten.
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8" /> <meta name = "viewport" content = "width = device-width; initial-scale = 1.0;"> <style> .container {max-width: 960px; Margin: 0 Auto; } .vidcontainer {width: 80%; Margin: 0 Auto; } Video Iframe {Breite: 100%; Höhe: auto;} </ style> <! - [if IE]> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [endif] -> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </ script> <script src = "/ js / jquery.fitvids.js"> </ script> <script> $ (document) .ready (function () { $ (". video"). fitVids (); // Videocontainer }); </ script> </ head> <body> <div class = "container"> <div class = "video"> <iframe src = "http://player.vimeo.com/video/sourcenameofvideo" width = "800 / embed /? moog_width = 800" height = "450" frameborder = "0"> </ iframe> </ div> </ div> </ body> </ html>
Die Verwendung ist einfach, rufen Sie einfach die Funktion fitVids auf, die auf ein Video zeigt, und das Element wird mit einem <div> umhüllt und CSS zum Ändern der Größe wird angewendet.
Derzeit ist es mit den wichtigsten Diensten wie Youtube, Vimeo, Blip.TV oder Viddler kompatibel
Wir können es mit einer Funktion zu WordPress hinzufügen, so dass die Größe aller Div-Klassen-Videos automatisch geändert wird.
<? php // Funktion zum Hinzufügen der Bibliothek fitvid function fitvids () { if (! is_admin ()) { wp_register_script ('fitvids', get_template_directory_uri (). '/js/jquery.fitvids.js', array ('jquery'), '1.0', true); wp_enqueue_script ('fitvids'); Funktion redimensiona_video () {?> <script type = "text / javascript"> jQuery (document) .ready (function () { jQuery ('. video'). fitVids (); }); </ script> } } } } add_action ('init', 'fitvids'); ?>
