{"id":94,"date":"2018-03-18T16:09:22","date_gmt":"2018-03-18T15:09:22","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=94"},"modified":"2018-03-18T16:09:22","modified_gmt":"2018-03-18T15:09:22","slug":"html-elemente-responsiv-ausblenden","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/94\/html-elemente-responsiv-ausblenden\/","title":{"rendered":"HTML-Elemente responsiv ausblenden"},"content":{"rendered":"<p>Um Webseiten responsiv zu gestalten, ist es manchmal notwendig Elemente nach der Bildschirmaufl\u00f6sung ein bzw. auszublenden.<\/p>\n<p><!--more--><\/p>\n<p><iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/xjown-kl08Y\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Nehmen wir folgende Seite an:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/html_responsive_1.png\" alt=\"\" width=\"700\" height=\"298\" class=\"alignnone size-full wp-image-95\" srcset=\"\/wp-content\/uploads\/2018\/03\/html_responsive_1.png 700w, \/wp-content\/uploads\/2018\/03\/html_responsive_1-300x128.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Der Header ist eine recht breite Grafik, welche am Desktop-Browser ohne Probleme dargestellt wird.<\/p>\n<p>Auf kleinen Ger\u00e4ten mit weniger gro\u00dfen Bildschirmen, passt die Grafik nicht mehr. Daher blenden wir hier eine andere Grafik ein und die urspr\u00fcngliche aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/html_responsiv.jpg\" alt=\"\" width=\"600\" height=\"449\" class=\"alignnone size-full wp-image-96\" srcset=\"\/wp-content\/uploads\/2018\/03\/html_responsiv.jpg 600w, \/wp-content\/uploads\/2018\/03\/html_responsiv-300x225.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>CSS-Eigenschaften welche von der Bildschirmgr\u00f6\u00dfe abh\u00e4ngen, sind leicht zu realisieren. Im Beispiel ist unser CSS so definiert:<\/p>\n<pre>\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\n\/* Landscape phones and down *\/\r\n@media (max-width: 600px) { \r\n    .bigheader    {\r\n      display: none;\r\n    }\r\n}\r\n\r\n@media (min-width: 600px) { \r\n    .smallheader {\r\n\t\tdisplay: none;\r\n    }\r\n}\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>Stehen weniger als 600 Pixel zur Verf\u00fcgung, wird der gro\u00dfe Header ausgeblendet und der kleine eingeblendet. Es lassen sich beliebig viele Breiten angeben, jeweils als <code>min-width<\/code> oder <code>max-width<\/code> und nat\u00fcrlich lassen sich beliebige CSS-Eigenschaften definieren, nicht nur die hier gezeigten.<\/p>\n<p>Man muss nur darauf achten, dass man keine widerspr\u00fcchlichen Definitionen anlegt. <\/p>\n<p>Die Anwendung der CSS-Eigenschaften ist dann ebenfalls recht einfach:<\/p>\n<pre>\r\n&lt;div class=&quot;bigheader&quot;&gt;\r\n\t\t&lt;img src=&quot;header.png&quot; width=&quot;1340&quot; height=&quot;136&quot;&gt; \r\n\t&lt;\/a&gt;\r\n&lt;\/div&gt;\t\r\n\r\n&lt;div class=&quot;smallheader&quot;&gt;\r\n\t&lt;img src=&quot;header_sm.png&quot; width=&quot;600&quot; height=&quot;136&quot;&gt; \r\n\t&lt;\/a&gt;\r\n&lt;\/div&gt;\t\r\n<\/pre>\n<p>Dem jeweiligen Element wird einfach die CSS-Klasse zugewiesen.<\/p>","protected":false},"excerpt":{"rendered":"<p>Um Webseiten responsiv zu gestalten, ist es manchmal notwendig Elemente nach der Bildschirmaufl\u00f6sung ein bzw. auszublenden.<\/p>\n","protected":false},"author":1,"featured_media":91,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[22,21],"class_list":["post-94","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-css","tag-responsive"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/91"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}