{"id":444,"date":"2017-04-23T04:09:24","date_gmt":"2017-04-23T07:09:24","guid":{"rendered":"http:\/\/3.238.148.255\/?p=444"},"modified":"2025-04-19T02:34:38","modified_gmt":"2025-04-19T01:34:38","slug":"wie-man-elemente-entfernt-und-hinzufugt-je-nach-gerateauflosung","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/de\/tech\/wie-man-elemente-entfernt-und-hinzufugt-je-nach-gerateauflosung\/","title":{"rendered":"Wie entferne und f\u00fcge ich Elemente je nach Ger\u00e4teaufl\u00f6sung hinzu?"},"content":{"rendered":"<p>Auf Ihren Wunsch behandelt dieser Artikel <strong>Medienanfragen<\/strong>, was bedeutet, dass <strong>Medientypen<\/strong> zusammen mit einem oder mehreren Ausdr\u00fccken \u00fcber die Eigenschaften eines Mediums, um die Formatierung f\u00fcr verschiedene Ger\u00e4te zu definieren. Browser oder Anwendungen lesen die im <strong>Abfrage<\/strong>, und wenn das betreffende Ger\u00e4t diese Bedingungen erf\u00fcllt, wird das entsprechende <strong>CSS<\/strong> angewendet wird.<\/p>\n<p>Medientypen geben an, f\u00fcr welche Medien ein bestimmter CSS-Block vorgesehen ist. HTML wurde entwickelt, um portabel zu sein, d. h., es kann von jedem Ger\u00e4t gelesen und interpretiert werden. Allerdings rendert jedes Ger\u00e4t HTML aufgrund von Faktoren wie der Bildschirmgr\u00f6\u00dfe anders (z. B. \u201e<strong>Aufl\u00f6sung<\/strong>\u201d). Beispielsweise verh\u00e4lt sich der Zugriff auf eine Site von einem Desktop aus nicht genauso wie der Zugriff von einem mobilen Ger\u00e4t aus, da es sich um unterschiedliche Ger\u00e4te mit unterschiedlichen <strong>Browsing-Kontexte<\/strong>.<\/p><div id=\"juand-1331158325\" class=\"juand-content juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<p>Die Herausforderung bei Media Queries besteht heute darin, dass immer mehr Ger\u00e4te mit unterschiedlichen Bildschirmgr\u00f6\u00dfen und Hardware-Funktionen auf den Markt kommen, die Desktops \u00e4hneln. Dadurch surfen sie fast wie Desktop-Computer. Nehmen Sie die <strong><u>iPhone X<\/u><\/strong> Beispielsweise ist die Anzeigequalit\u00e4t hervorragend und der Browser rendert Seiten genau wie ein typischer Desktop-Browser.<\/p>\n<p>In diesem Fall ist es nicht notwendig, ein Layout und CSS speziell f\u00fcr <strong>Handheld<\/strong> Medientypen auf dem iPhone \u2013 denn obwohl es ein Handheld ist, verh\u00e4lt es sich nicht wie eines. Es verh\u00e4lt sich aber auch nicht genau wie ein Desktop. Obwohl Safaris Rendering-Engine mit der Desktop-Version identisch ist, unterscheiden sich Benutzerverhalten und Navigationsmuster. Wir befinden uns in einem Mittelweg: Wir k\u00f6nnen weder ein komplett separates CSS f\u00fcr Handhelds bereitstellen, noch k\u00f6nnen wir uns ausschlie\u00dflich auf einen Desktop verlassen (<strong>Bildschirm<\/strong>) Stylesheet.<\/p>\n<p>Nachfolgend wird beschrieben, wie Sie definieren, welche Stylesheet-Regeln geladen werden sollen:<\/p>\n<blockquote><p><span class=\"html-tag\">&lt;style&gt;<\/span><br \/>\n@media screen und (max-width:1024px) {<br \/>\n.small-resolution { Anzeige: keine; }<br \/>\n}<br \/>\n.kleine Aufl\u00f6sung { Anzeige: Block; }<br \/>\n<span class=\"html-tag\">&lt;\/style&gt;<\/span><\/p><\/blockquote>\n<p>Optional k\u00f6nnen Sie eine separate <strong>.css<\/strong> Datei und hosten Sie sie entweder auf Ihrem eigenen Server oder \u00fcber die CDN-L\u00f6sung meines Startups, <a href=\"https:\/\/www.blenner.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blenner SmartCDN<\/a>. F\u00fcgen Sie es dann wie folgt in den Metadatenabschnitt Ihres HTML-Codes ein:<\/p><div id=\"juand-4084306443\" class=\"juand-content_2 juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<blockquote><p>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;URL_OF_YOUR_CSS_FILE&#8221;&gt;<\/p><\/blockquote>\n<p>Sobald Ihre CSS-Datei vorhanden ist, rufen Sie die Klasse einfach dort auf, wo Sie das responsive Verhalten ben\u00f6tigen. So wenden Sie sie beispielsweise auf ein Bild an, das mit einem benutzerdefinierten Tag namens \u201eC\u201c umschlossen ist:<\/p>\n<blockquote><p>&lt;c class=&#8221;small-resolution&#8221;&gt;<br \/>\n&lt;img src=&quot;&rdquo;IMAGE_URL&rdquo;&quot; alt=&quot;&amp;quot;BESCHREIBUNG&amp;quot;&quot; id=&quot;&rdquo;OPTIONAL_ADDITIONAL_ID&rdquo;&quot;&gt;<br \/>\n&lt;\/c&gt;<\/p><\/blockquote>\n<p>Hoffe, das hilft! \ud83d\ude00<br \/>\nHinterlassen Sie unten Ihre Kommentare und teilen Sie sie mit Ihren Freunden!<\/p>","protected":false},"excerpt":{"rendered":"<p>Auf Ihren Wunsch behandelt dieser Artikel Media Queries. Dabei werden Medientypen zusammen mit einem oder mehreren Ausdr\u00fccken zu den Eigenschaften eines Mediums verwendet, um die Formatierung f\u00fcr verschiedene Ger\u00e4te zu definieren. Browser oder Anwendungen lesen die in der Abfrage definierten Ausdr\u00fccke, und wenn das betreffende Ger\u00e4t diese Bedingungen erf\u00fcllt, wird das entsprechende CSS angewendet.<\/p>","protected":false},"author":1,"featured_media":97955,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1302,1289],"tags":[],"class_list":["post-444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devs","category-tech"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.juandesouza.com\/wp-content\/uploads\/2017\/11\/pexels-markusspiske-1089440-scaled.jpg?fit=2560%2C1707&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p8STS8-7a","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/posts\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":4,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":98092,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/posts\/444\/revisions\/98092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/media\/97955"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/de\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}