{"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":"comment-supprimer-et-ajouter-des-elements-en-fonction-de-la-resolution-de-lappareil","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/fr\/tech\/comment-supprimer-et-ajouter-des-elements-en-fonction-de-la-resolution-de-lappareil\/","title":{"rendered":"Comment supprimer et ajouter des \u00e9l\u00e9ments en fonction de la r\u00e9solution de l&#039;appareil ?"},"content":{"rendered":"<p>\u00c0 votre demande, cet article couvrira <strong>Requ\u00eates des m\u00e9dias<\/strong>, ce qui signifie utiliser <strong>Types de m\u00e9dias<\/strong> avec une ou plusieurs expressions concernant les caract\u00e9ristiques d&#039;un m\u00e9dia afin de d\u00e9finir le formatage pour diff\u00e9rents appareils. Les navigateurs ou applications lisent les expressions d\u00e9finies dans le <strong>Requ\u00eate<\/strong>, et si l&#039;appareil en question correspond \u00e0 ces conditions, le correspondant <strong>CSS<\/strong> est appliqu\u00e9.<\/p>\n<p>Les types de m\u00e9dias pr\u00e9cisent \u00e0 quel type de m\u00e9dia un bloc CSS est destin\u00e9. HTML a \u00e9t\u00e9 cr\u00e9\u00e9 pour \u00eatre portable, c&#039;est-\u00e0-dire pour \u00eatre lu et interpr\u00e9t\u00e9 par tout type d&#039;appareil. Cependant, chaque appareil restitue le HTML diff\u00e9remment en raison de facteurs tels que les dimensions de l&#039;\u00e9cran (par exemple, \u00ab\u00a0\u00bb).<strong>r\u00e9solution<\/strong>\u00ab\u00a0\u00bb. Par exemple, acc\u00e9der \u00e0 un site depuis un ordinateur de bureau ne se comportera pas de la m\u00eame mani\u00e8re que depuis un appareil mobile, car il s&#039;agit d&#039;appareils diff\u00e9rents avec des fonctionnalit\u00e9s diff\u00e9rentes. <strong>contextes de navigation<\/strong>.<\/p><div id=\"juand-799879045\" 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>Le d\u00e9fi des requ\u00eates multim\u00e9dias aujourd&#039;hui r\u00e9side dans l&#039;apparition de plus en plus d&#039;appareils dot\u00e9s de tailles d&#039;\u00e9cran vari\u00e9es et de capacit\u00e9s mat\u00e9rielles similaires \u00e0 celles des ordinateurs de bureau, ce qui les am\u00e8ne \u00e0 naviguer presque comme sur des ordinateurs de bureau. <strong><u>iPhone X<\/u><\/strong> \u00e0 titre d&#039;exemple : sa qualit\u00e9 d&#039;affichage est superbe et son navigateur rend les pages comme un navigateur de bureau classique.<\/p>\n<p>Dans ce cas, il n&#039;est pas n\u00e9cessaire de pr\u00e9parer une mise en page et un CSS sp\u00e9cifiquement pour <strong>portable<\/strong> Types de m\u00e9dias sur l&#039;iPhone\u00a0: bien qu&#039;il s&#039;agisse d&#039;un appareil portable, il ne se comporte pas comme tel. Il ne se comporte pas non plus exactement comme un ordinateur de bureau. M\u00eame si le moteur de rendu de Safari est identique \u00e0 celui de la version pour ordinateur, le comportement et les habitudes de navigation de l&#039;utilisateur diff\u00e8rent. On se retrouve donc dans une situation interm\u00e9diaire\u00a0: impossible de fournir un CSS enti\u00e8rement distinct pour l&#039;appareil portable, ni de se fier uniquement \u00e0 une version pour ordinateur de bureau (<strong>\u00e9cran<\/strong>) feuille de style.<\/p>\n<p>Vous trouverez ci-dessous comment d\u00e9finir les r\u00e8gles de feuille de style \u00e0 charger\u00a0:<\/p>\n<blockquote><p><span class=\"html-tag\">&lt;style&gt;<\/span><br \/>\n@media screen et (largeur maximale\u00a0:\u00a01\u00a0024\u00a0px) {<br \/>\n.petite-r\u00e9solution { affichage\u00a0: aucun\u00a0; }<br \/>\n}<br \/>\n.petite-r\u00e9solution { affichage\u00a0: bloc\u00a0; }<br \/>\n<span class=\"html-tag\">&lt;\/style&gt;<\/span><\/p><\/blockquote>\n<p>En option, vous pouvez cr\u00e9er un fichier s\u00e9par\u00e9 <strong>.css<\/strong> fichier et h\u00e9bergez-le soit sur votre propre serveur, soit via la solution CDN de ma startup, <a href=\"https:\/\/www.blenner.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blenner SmartCDN<\/a>. Ensuite, incluez-le dans la section m\u00e9tadonn\u00e9es de votre HTML comme ceci\u00a0:<\/p><div id=\"juand-3221635377\" 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>Une fois votre fichier CSS en place, il vous suffit d&#039;appeler la classe l\u00e0 o\u00f9 vous souhaitez un comportement r\u00e9actif. Par exemple, pour l&#039;appliquer \u00e0 une image envelopp\u00e9e dans une balise personnalis\u00e9e nomm\u00e9e \u00ab\u00a0C\u00a0\u00bb\u00a0:<\/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;DESCRIPTION&amp;quot;&quot; id=&quot;&rdquo;OPTIONAL_ADDITIONAL_ID&rdquo;&quot;&gt;<br \/>\n&lt;\/c&gt;<\/p><\/blockquote>\n<p>J&#039;esp\u00e8re que cela aide ! \ud83d\ude00<br \/>\nLaissez vos commentaires ci-dessous et partagez avec vos amis !<\/p>","protected":false},"excerpt":{"rendered":"<p>\u00c0 votre demande, cet article traitera des requ\u00eates m\u00e9dia, qui utilisent des types de m\u00e9dias avec une ou plusieurs expressions relatives aux caract\u00e9ristiques d&#039;un m\u00e9dia afin de d\u00e9finir le formatage pour diff\u00e9rents appareils. Les navigateurs ou applications lisent les expressions d\u00e9finies dans la requ\u00eate et, si l&#039;appareil concern\u00e9 remplit ces conditions, le CSS correspondant est appliqu\u00e9.<\/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\/fr\/wp-json\/wp\/v2\/posts\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":4,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":98092,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/posts\/444\/revisions\/98092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/media\/97955"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/fr\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}