{"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":"hoe-elementen-te-verwijderen-en-toe-te-voegen-afhankelijk-van-de-apparaatresolutie","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/nl\/tech\/hoe-elementen-te-verwijderen-en-toe-te-voegen-afhankelijk-van-de-apparaatresolutie\/","title":{"rendered":"Hoe kan ik elementen verwijderen en toevoegen, afhankelijk van de resolutie van het apparaat?"},"content":{"rendered":"<p>Op uw verzoek zal dit artikel het volgende behandelen: <strong>Media Query&#039;s<\/strong>, wat betekent dat er gebruik wordt gemaakt van <strong>Mediatypen<\/strong> samen met een of meer expressies over de kenmerken van een medium om de opmaak voor verschillende apparaten te defini\u00ebren. Browsers of applicaties lezen de expressies die in de <strong>Vraag<\/strong>en als het betreffende apparaat aan die voorwaarden voldoet, wordt de overeenkomstige <strong>CSS<\/strong> wordt toegepast.<\/p>\n<p>Mediatypen specificeren voor welk type media een bepaald CSS-blok bedoeld is. HTML is ontworpen om draagbaar te zijn, dat wil zeggen, om door elk apparaat gelezen en ge\u00efnterpreteerd te kunnen worden. Elk apparaat geeft HTML echter anders weer, afhankelijk van factoren zoals schermafmetingen (bijvoorbeeld &quot;<strong>oplossing<\/strong>\u201d). Het openen van een site vanaf een desktop verloopt bijvoorbeeld niet op dezelfde manier als het openen ervan vanaf een mobiel apparaat, omdat dit verschillende apparaten zijn met verschillende <strong>browse-contexten<\/strong>.<\/p><div id=\"juand-1706045493\" 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>De uitdaging met Media Queries is tegenwoordig dat er steeds meer apparaten op de markt komen met verschillende schermformaten en hardwaremogelijkheden die vergelijkbaar zijn met die van desktops, waardoor ze bijna net zo browsen als desktopmachines. Neem de <strong><u>iPhone X<\/u><\/strong> Bijvoorbeeld: de weergavekwaliteit is uitstekend en de browser geeft pagina&#039;s weer zoals een typische desktopbrowser.<\/p>\n<p>In dat geval is het niet nodig om een lay-out en CSS specifiek voor te bereiden <strong>draagbaar<\/strong> mediatypen op de iPhone \u2013 want hoewel het een handheld is, gedraagt het zich er niet als een. Toch gedraagt het zich ook niet precies als een desktop. Hoewel Safari&#039;s rendering engine identiek is aan de desktopversie, verschillen het gedrag en de navigatiepatronen van de gebruiker nog steeds. We komen op een middenweg terecht: we kunnen geen volledig aparte CSS voor handhelds bieden, noch kunnen we uitsluitend vertrouwen op een desktop (<strong>scherm<\/strong>) stijlblad.<\/p>\n<p>Hieronder ziet u hoe u definieert welke stylesheetregels moeten worden geladen:<\/p>\n<blockquote><p><span class=\"html-tag\">&lt;style&gt;<\/span><br \/>\n@media scherm en (max-breedte:1024px) {<br \/>\n.kleine resolutie { weergave: geen; }<br \/>\n}<br \/>\n.kleine resolutie { weergave: blok; }<br \/>\n<span class=\"html-tag\">&lt;\/style&gt;<\/span><\/p><\/blockquote>\n<p>Optioneel kunt u een aparte <strong>.css<\/strong> bestand en host het op uw eigen server of via de CDN-oplossing van mijn startup, <a href=\"https:\/\/www.blenner.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blenner SmartCDN<\/a>Voeg het vervolgens toe aan de metadata-sectie van uw HTML, zoals hier:<\/p><div id=\"juand-1611640027\" 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>Zodra je CSS-bestand klaar is, roep je de klasse simpelweg aan op de plek waar je het responsieve gedrag nodig hebt. Om het bijvoorbeeld toe te passen op een afbeelding die is ingepakt in een aangepaste tag met de naam &quot;C&quot;, doe je het volgende:<\/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;BESCHRIJVING&amp;quot;&quot; id=&quot;&rdquo;OPTIONAL_ADDITIONAL_ID&rdquo;&quot;&gt;<br \/>\n&lt;\/c&gt;<\/p><\/blockquote>\n<p>Ik hoop dat dit helpt! \ud83d\ude00<br \/>\nLaat hieronder uw reactie achter en deel het met uw vrienden!<\/p>","protected":false},"excerpt":{"rendered":"<p>Op uw verzoek behandelt dit artikel mediaquery&#039;s. Dit houdt in dat mediatypen samen met een of meer expressies over de kenmerken van een medium worden gebruikt om de opmaak voor verschillende apparaten te defini\u00ebren. Browsers of applicaties lezen de expressies die in de query zijn gedefinieerd en als het betreffende apparaat aan die voorwaarden voldoet, wordt de bijbehorende CSS toegepast.<\/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\/nl\/wp-json\/wp\/v2\/posts\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":4,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":98092,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/posts\/444\/revisions\/98092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/media\/97955"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}