Mit diesem Artikel wird unser Webdesign endlich responsiv\u2026<\/p>\n\n\n\n\n\n\n\n
Let\u2018s get responsiv!<\/strong><\/p>\n\n\n\n Responsives Webdesign was ist das \u00fcberhaupt? Ganz einfach erkl\u00e4rt, geht es darum eine Webseite f\u00fcr bestimmte Ausgabeger\u00e4te (Bildschirmgr\u00f6\u00dfen) anzupassen. Unsere Webseite soll also auf dem gro\u00dfen Bildschirm des Desktop-Computers genauso gut aussehen wie auf einem Smartphone-Display\u2026Um das zu erreichen, kommen jetzt Media Queries ins Spiel.<\/p>\n\n\n\n Methode 1 = Link-Element<\/strong><\/p>\n\n\n\n Die Media Queries k\u00f6nnen innerhalb des head-Bereiches einfach als link-Element zugef\u00fcgt werden.<\/p>\n\n\n\n Im hier gezeigten Beispiel wird bis zu einer Maximalbreite von 600 Pixeln eine eigene CSS-Datei ausgeliefert. Die Datei \u201c600.css\u201c bekommt f\u00fcr dieses Experiment folgenden Inhalt\u2026:<\/p>\n\n\n\n Der Hintergrund von body wird also in rot gestaltet und der header bekommt die Hintergrundfarbe gr\u00fcn.<\/p>\n\n\n\n Methode 2 = @media-Anweisung<\/strong><\/p>\n\n\n\n Methode 2 verzichtet auf zus\u00e4tzliche link-Elemente und lagert alles direkt in die CSS-Dateien aus. In der \u201czentrale.css\u201c wird folgender Eintrag erg\u00e4nzt\u2026:<\/p>\n\n\n\n Diese neue CSS-Datei wird jetzt nat\u00fcrlich auch erstellt und bekommt folgenden Inhalt\u2026:<\/p>\n\n\n\n Das Grundger\u00fcst f\u00fcr Responsives Webdesign ist also erstellt. Welche Methode man nutzt ist \u00fcbrigens reine Geschmackssache\u2026Alles was jetzt kommt sind Experimente mit verschiedenen Bildschirmgr\u00f6\u00dfen\u2026<\/p>\n","protected":false},"excerpt":{"rendered":" Mit diesem Artikel wird unser Webdesign endlich responsiv\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-391","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=391"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/391\/revisions"}],"predecessor-version":[{"id":392,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/391\/revisions\/392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<link rel=\"stylesheet\" href=\"01_CSS\/600.css\" media=\"screen and (max-width: 600px)\">\n<\/code><\/pre>\n\n\n\nbody {\nbackground-color: red;\ncolor: black;\n}\n\nheader {\nbackground-color: green;\n}<\/code><\/pre>\n\n\n\n@import url(09_responsiv01.css);<\/code><\/pre>\n\n\n\n@media screen and (max-width: 600px){\nheader {\nbackground-color: green;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n