{"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":"come-rimuovere-e-aggiungere-elementi-in-base-alla-risoluzione-del-dispositivo","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/it\/tech\/come-rimuovere-e-aggiungere-elementi-in-base-alla-risoluzione-del-dispositivo\/","title":{"rendered":"Come rimuovere e aggiungere elementi in base alla risoluzione del dispositivo?"},"content":{"rendered":"<p>Su vostra richiesta, questo articolo coprir\u00e0 <strong>Richieste dei media<\/strong>, che significa usare <strong>Tipi di media<\/strong> insieme a una o pi\u00f9 espressioni relative alle caratteristiche di un supporto per definire la formattazione per diversi dispositivi. I browser o le applicazioni leggono le espressioni definite in <strong>Domanda<\/strong>e se il dispositivo in questione soddisfa tali condizioni, il corrispondente <strong>CSS<\/strong> viene applicata.<\/p>\n<p>I tipi di media specificano a quale tipo di media \u00e8 destinato un determinato blocco di CSS. L&#039;HTML \u00e8 stato creato per essere portabile, ovvero per essere letto e interpretato da qualsiasi tipo di dispositivo. Tuttavia, ogni dispositivo visualizza l&#039;HTML in modo diverso a causa di fattori come le dimensioni dello schermo (ad esempio, &quot;<strong>risoluzione<\/strong>\u201d). Ad esempio, l&#039;accesso a un sito da un desktop non si comporter\u00e0 allo stesso modo dell&#039;accesso da un dispositivo mobile, perch\u00e9 si tratta di dispositivi diversi con impostazioni diverse <strong>contesti di navigazione<\/strong>.<\/p><div id=\"juand-4083444381\" 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>La sfida con le query multimediali oggi \u00e8 che sempre pi\u00f9 dispositivi emergono con dimensioni dello schermo variabili e capacit\u00e0 hardware simili ai desktop, portandoli a navigare quasi come macchine desktop. Prendi il <strong><u>iPhone X<\/u><\/strong> Ad esempio: la qualit\u00e0 di visualizzazione \u00e8 superba e il browser visualizza le pagine esattamente come un normale browser desktop.<\/p>\n<p>In tal caso, non \u00e8 necessario preparare un layout e un CSS specifici per <strong>palmare<\/strong> tipi di media su iPhone, poich\u00e9, pur essendo un dispositivo portatile, non si comporta come tale. Eppure, non si comporta nemmeno esattamente come un desktop. Sebbene il motore di rendering di Safari sia identico a quello della versione desktop, il comportamento e gli schemi di navigazione dell&#039;utente sono comunque diversi. Ci troviamo quindi in una posizione intermedia: non possiamo fornire un CSS completamente separato per la versione portatile, n\u00e9 possiamo affidarci esclusivamente a un desktop (<strong>schermo<\/strong>) foglio di stile.<\/p>\n<p>Di seguito \u00e8 riportato come definire quali regole del foglio di stile devono essere caricate:<\/p>\n<blockquote><p><span class=\"html-tag\">&lt;style&gt;<\/span><br \/>\n@media screen e (larghezza massima: 1024px) {<br \/>\n.small-resolution { display: none; }<br \/>\n}<br \/>\n.piccola risoluzione { display: blocco; }<br \/>\n<span class=\"html-tag\">&lt;\/style&gt;<\/span><\/p><\/blockquote>\n<p>Facoltativamente, puoi creare un file separato <strong>.css<\/strong> archiviarlo e ospitarlo sul tuo server o tramite la soluzione CDN della mia startup, <a href=\"https:\/\/www.blenner.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blenner SmartCDN<\/a>Quindi, includilo nella sezione metadati del tuo HTML in questo modo:<\/p><div id=\"juand-1494299478\" 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>Una volta inserito il file CSS, \u00e8 sufficiente &quot;chiamare&quot; la classe ovunque sia necessario il comportamento reattivo. Ad esempio, per applicarla a un&#039;immagine racchiusa in un tag personalizzato denominato &quot;C&quot;:<\/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;DESCRIZIONE&amp;quot;&quot; id=&quot;&rdquo;OPTIONAL_ADDITIONAL_ID&rdquo;&quot;&gt;<br \/>\n&lt;\/c&gt;<\/p><\/blockquote>\n<p>Spero che questo ti aiuti! \ud83d\ude00<br \/>\nLasciate i vostri commenti qui sotto e condivideteli con i vostri amici!<\/p>","protected":false},"excerpt":{"rendered":"<p>Su vostra richiesta, questo articolo tratter\u00e0 le Media Queries, ovvero l&#039;utilizzo di Media Types insieme a una o pi\u00f9 espressioni relative alle caratteristiche di un supporto per definire la formattazione per diversi dispositivi. I browser o le applicazioni leggono le espressioni definite nella Query e, se il dispositivo in questione soddisfa tali condizioni, viene applicato il CSS corrispondente.<\/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\/it\/wp-json\/wp\/v2\/posts\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":4,"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":98092,"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/posts\/444\/revisions\/98092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/media\/97955"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/it\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"parola chiave","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}