Wie w\u00e4re es mit einem Layout das sich unterschiedlichen Bildschirmgr\u00f6\u00dfen anpasst? Mit Responsivem Webdesign geht das und dieser Artikel zeigt wie es geht\u2026<\/p>\n\n\n\n\n\n\n\n
Responsives Webdesign f\u00fcr unser Layout:<\/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 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 Wie w\u00e4re es mit einem Layout das sich unterschiedlichen Bildschirmgr\u00f6\u00dfen anpasst? Mit Responsivem Webdesign geht das und dieser Artikel zeigt wie es geht\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-2968","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\/2968","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=2968"}],"version-history":[{"count":4,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2968\/revisions"}],"predecessor-version":[{"id":2972,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/2968\/revisions\/2972"}],"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=2968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=2968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=2968"}],"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)\"><\/code><\/pre>\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\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
Diese neue CSS-Datei wird jetzt nat\u00fcrlich auch erstellt und bekommt folgenden Inhalt\u2026:<\/p>\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
Das Grundger\u00fcst f\u00fcr Responsives Webdesign ist also erstellt.<\/p>\n\n\n\n
Der HTML Quelltext:<\/strong><\/p>\n\n\n\n<!DOCTYPE html> \n<html lang=\"de\">\n\n<head> \n<title>Webdesign<\/title>\n<link rel=\"stylesheet\" href=\"01_CSS\/01_zentrale.css\" type=\"text\/css\" \/>\n<link rel=\"stylesheet\" href=\"01_CSS\/600.css\" media=\"screen and (max-width: 600px)\">\n<link rel=\"stylesheet\" href=\"01_CSS\/galaxy.css\" media=\"screen and (min-width: 360px) and (max-width: 360px) and (min-height: 740px) and (max-height: 740px)\">\n<meta charset=\"UTF-8\">\n<\/head> \n\n<body>\n<div id=\"wrapper\"> \n<header> \n<\/header>\n\n<nav> <!-- Anfang vom nav-Element -->\n\n<ul>\n <li><a href=\"index.html\">Startseite 1<\/a><\/li>\n <li><a href=\"index.html\">Startseite 2<\/a><\/li>\n<\/ul>\n\n<\/nav> <!-- Ende vom nav-Element -->\n\n<main>\n\n<article>\n<h1>Responsives Webdesign:<\/h1>\n<p>\nWillkommen auf meiner ersten responisven Webseite...\n<\/p>\n<\/article>\n<br \/>\n\n<\/main> <!-- Ende vom main-Element -->\n\n<footer> <!-- Anfang vom footer-Element -->\n<\/footer> <!-- Ende vom footer-Element -->\n\n<\/div> <!-- Ende vom wrapper-Bereich -->\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c01_zentrale.css\u201c:<\/strong><\/p>\n\n\n\n@import url(02_fundament.css);\n@import url(03_body.css);\n@import url(04_wrapper.css);\n@import url(05_kopfbereich.css);\n@import url(06_navibereich.css);\n@import url(07_textbereich.css);\n@import url(08_artikel.css);<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c02_fundament.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\n* {\npadding: 0;\nmargin: 0;\n}\n\nhtml {\nheight: 101%;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c03_body.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nbody {\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c04_wrapper.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\n#wrapper {\nmargin: 5px;\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c05_kopfbereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nheader {\nheight: 80px;\nbackground-image: url(..\/cpm-header01.jpg);\nbackground-repeat: no-repeat;\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 5px;\npadding-right: 5px;\npadding-bottom: 5px;\npadding-left: 5px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c06_navibereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nnav {\nposition: absolute;\ntop: 97px;\nleft: 5px;\nwidth: 210px;\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 10px;\npadding-right: 10px;\npadding-bottom: 10px;\npadding-left: 10px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c07_textbereich.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\nmain {\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 3px;\nmargin-right: 5px;\nmargin-bottom:5px;\nmargin-left: 241px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 20px;\npadding-right: 20px;\npadding-bottom: 20px;\npadding-left: 20px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nmain a:link {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:visited {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:hover {\ncolor: black;\nbackground-color: white;\ntext-decoration: underline;\n}\n\nmain a:focus {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:active {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c08_artikel.css\u201c:<\/strong><\/p>\n\n\n\n@media all {\n\narticle {\noverflow: hidden;\ncolor: black;\nbackground-color: lightsteelblue;\npadding: 5px;\nborder-style: solid;\nborder-color: black;\nborder-width: 1px;\n}\n\n.clearingtext {\nclear: both;\nbackground-color: lightsteelblue;\n}\n\n.bildlinks {\nfloat: left;\nmargin-top: 5px;\nmargin-right: 15px;\nmargin-bottom: 5px;\nmargin-left: 0px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid; \/* dashed ergibt eine gestrichelte Rahmenlinie*\/\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n}\n\n.bildrechts {\nfloat: right;\nmargin-top: 5px;\nmargin-left: 15px;\nmargin-bottom: 5px;\nborder-style: solid;\nborder-width: 1px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201c600.css\u201c:<\/strong><\/p>\n\n\n\nbody {\nbackground-color: red;\ncolor: black;\n}\n\nheader {\nbackground-color: green;\n}\n\nnav {\ntop: 97px;\nleft: 5px;\nwidth: 210px;\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 10px;\npadding-right: 10px;\npadding-bottom: 10px;\npadding-left: 10px;\n\nfont-family: Arial;\nfont-size: smaller;\n}\n\nnav li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}\n\nnav a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:visited {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:focus {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nnav a:active {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\n}\n\nmain {\n\nbackground-color: steelblue;\ncolor: white;\n\nmargin-top: 3px;\nmargin-right: 5px;\nmargin-bottom:5px;\nmargin-left: 5px; \/*war 241*\/\n\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px; \nborder-left-width: 1px;\n\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\n\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\n\npadding-top: 20px;\npadding-right: 20px;\npadding-bottom: 20px;\npadding-left: 20px;\nfont-family: Arial;\nfont-size: smaller;\n}\n\nmain a:link {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:visited {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:hover {\ncolor: black;\nbackground-color: white;\ntext-decoration: underline;\n}\n\nmain a:focus {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}\n\nmain a:active {\ncolor: white;\nbackground-color: steelblue;\ntext-decoration: underline;\n}<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Datei \u201cgalaxy.css\u201c:<\/strong><\/p>\n\n\n\nbody {\nbackground-color: blue;\ncolor: black;\n}\n\nheader {\nbackground-color: yellow;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"