{"id":17177,"date":"2011-06-09T11:10:18","date_gmt":"2011-06-09T09:10:18","guid":{"rendered":"http:\/\/www.article-marketing.eu\/comunicati\/senza-categoria\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/"},"modified":"2011-06-09T11:10:18","modified_gmt":"2011-06-09T09:10:18","slug":"come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3","status":"publish","type":"post","link":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/","title":{"rendered":"Layout fluido con i Media Queries di Css3"},"content":{"rendered":"

Un tempo esistevano solo i layout fissi. Poi con l’espansione di internet, facebook e i social network sempre più persone hanno iniziato a navigare su internet; questo ha portato anche a un aumento smisurato di dispositivi, <\/strong>pensiamo ad esempio ai molteplici smartphone e tablet che ciorcolano oggi in tutto il mondo. Prima dei nuovi linguaggi di nuova generazione, i layout dovevano essere adattati tramite layout fluidi, ovvero adottando le percentuali al posto dei px per specificare le dimensioni, posizione etc. Oggi il Webdesign grazie ai nuovi linguaggi e alla nascita di <\/strong>Guide Html5 , Css3 e jQuery <\/strong><\/a>ci viene in aiuto con la nuova tecnica Media Queries.<\/strong> I media queries sono una speciale introduzione dei Css3 che , (per fortuna direi), agevolano di molto il lavoro dei web designer. In pratica ci consentono di creare diversi fogli di stile realizzati ad Hoc per adattare la risoluzione del sito ad determinate risoluzioni (o condizioni). Ecco un esempio: Codice da incollare nel file HTML \/dentro In questo caso si specifica al documento di caricare il foglio di stile mio_stile.css <\/strong>nel caso il sito venga visualizzato da un dispositivo con larghezza fino a un massimo di 480px. Possiamo, in alternativa, usare un unico foglio di stile, ma specificandone una parte adibita alla visualizzazione<\/strong> su dispositivi a larghezza massima 480px. Nel foglio di stile usiamo questo codice: @media only screen and (max-device-width: 480px) {
TUO STILE PER LARGHEZZA MAX 480px
} Ovviamente esistono molti PRO e contro su questa tecnica:<\/strong> I pro sono sicuramente la possibilità di creare il sito “su misura” per tutti i dispositivi , mobili, desktop, e tablet. I contro invece sono sicuramente i costi… <\/strong>dovrete infatti far presente al cliente in fase di preventivo che questa “personalizzazione” e adattabilità assoluta incide sul prezzo finale. Personalmente ho ovviato a questo “problema” realizzando in fase di concept un layout quanto più fluido e scalabile possibile, con grid a 960px <\/strong>in modo tale che sia visualizzabile senza “personalizzazioni” anche su dispositivi “piccoli” come tablet ipad e schermi a 1024.<\/strong> Per gli smartphone e android invece ho sviluppato uno script php <\/strong>che reindirizza a una cartella del sito \/mobile nel caso venga rilevato uno smartphone o iphone. In questo modo si escludono gli schermi più piccoli di 1024px, ma è un’esclusione ormai che tutti i clienti sono pronti ad accettare, anche in vista di un notevole risparmio.<\/strong>
\nIn fase di preventivo un buon consiglio e’ quello di analizzare le esigenze e il target del vostro cliente, ricordate sempre che le necessità dei vari clienti variano a seconda di chi si rivolgono. Se si rivolgono specificatamente a un target troppo “anziano” come ad esempio ville di lusso, immobili di lusso o macchine sportive, probabilmente dovrete includere un progetto completo e perfettamente scalabile usando i Css3 e i media queries. Se invece, si rivolgono a un pubblico più giovane (come ad esempio spiagge, pizzerie, hotel, alberghi etc) potete, secondo chi scrive, uniformare il tutto o, almeno, far presente al cliente in fase di preventivo, la spesa extra dovuta alla creazione di layout personalizzati per i vari dispositivi.<\/p>\n","protected":false},"excerpt":{"rendered":"

Rendiamo la struttura del nostro sito dinamica grazie a Css3 Media Queries, adattanto il layout del nostro sito ai diversi tipo di dispositivo (mobile, schermo piccolo etc), senza perdere qualit\u00e0.<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[1813],"tags":[27301,27300,4265],"class_list":["post-17177","post","type-post","status-publish","format-standard","hentry","category-web-design","tag-guida-css3","tag-media-queries-css3","tag-web-design"],"yoast_head":"\nLayout fluido con i Media Queries di Css3 - Article Marketing<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Layout fluido con i Media Queries di Css3 - Article Marketing\" \/>\n<meta property=\"og:description\" content=\"Rendiamo la struttura del nostro sito dinamica grazie a Css3 Media Queries, adattanto il layout del nostro sito ai diversi tipo di dispositivo (mobile, schermo piccolo etc), senza perdere qualit\u00e0.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Article Marketing\" \/>\n<meta property=\"article:published_time\" content=\"2011-06-09T09:10:18+00:00\" \/>\n<meta name=\"author\" content=\"Redazione Comunicati Stampa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Redazione Comunicati Stampa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/\"},\"author\":{\"name\":\"Redazione Comunicati Stampa\",\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/#\/schema\/person\/44372e4d4d0fa797b18e03ed1ace9017\"},\"headline\":\"Layout fluido con i Media Queries di Css3\",\"datePublished\":\"2011-06-09T09:10:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/\"},\"wordCount\":522,\"commentCount\":0,\"keywords\":[\"guida css3\",\"media queries css3\",\"web design\"],\"articleSection\":[\"Web design\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/\",\"url\":\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/\",\"name\":\"Layout fluido con i Media Queries di Css3 - Article Marketing\",\"isPartOf\":{\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/#website\"},\"datePublished\":\"2011-06-09T09:10:18+00:00\",\"author\":{\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/#\/schema\/person\/44372e4d4d0fa797b18e03ed1ace9017\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.article-marketing.eu\/comunicati\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Layout fluido con i Media Queries di Css3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/#website\",\"url\":\"https:\/\/www.article-marketing.eu\/comunicati\/\",\"name\":\"Article Marketing\",\"description\":\"article marketing & press release\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.article-marketing.eu\/comunicati\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/#\/schema\/person\/44372e4d4d0fa797b18e03ed1ace9017\",\"name\":\"Redazione Comunicati Stampa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.article-marketing.eu\/comunicati\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/50e5c6421d3072f42e7ace803501602c60d75233d34e29fd05feb91c8760b792?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/50e5c6421d3072f42e7ace803501602c60d75233d34e29fd05feb91c8760b792?s=96&d=mm&r=g\",\"caption\":\"Redazione Comunicati Stampa\"},\"url\":\"https:\/\/www.article-marketing.eu\/comunicati\/author\/redazione-comunicati-stampa\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Layout fluido con i Media Queries di Css3 - Article Marketing","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/","og_locale":"it_IT","og_type":"article","og_title":"Layout fluido con i Media Queries di Css3 - Article Marketing","og_description":"Rendiamo la struttura del nostro sito dinamica grazie a Css3 Media Queries, adattanto il layout del nostro sito ai diversi tipo di dispositivo (mobile, schermo piccolo etc), senza perdere qualit\u00e0.","og_url":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/","og_site_name":"Article Marketing","article_published_time":"2011-06-09T09:10:18+00:00","author":"Redazione Comunicati Stampa","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Redazione Comunicati Stampa","Tempo di lettura stimato":"3 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/#article","isPartOf":{"@id":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/"},"author":{"name":"Redazione Comunicati Stampa","@id":"https:\/\/www.article-marketing.eu\/comunicati\/#\/schema\/person\/44372e4d4d0fa797b18e03ed1ace9017"},"headline":"Layout fluido con i Media Queries di Css3","datePublished":"2011-06-09T09:10:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/"},"wordCount":522,"commentCount":0,"keywords":["guida css3","media queries css3","web design"],"articleSection":["Web design"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/","url":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/","name":"Layout fluido con i Media Queries di Css3 - Article Marketing","isPartOf":{"@id":"https:\/\/www.article-marketing.eu\/comunicati\/#website"},"datePublished":"2011-06-09T09:10:18+00:00","author":{"@id":"https:\/\/www.article-marketing.eu\/comunicati\/#\/schema\/person\/44372e4d4d0fa797b18e03ed1ace9017"},"breadcrumb":{"@id":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.article-marketing.eu\/comunicati\/internet\/web-design\/come-adattare-il-layout-del-vostro-sito-web-con-i-media-queries-di-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.article-marketing.eu\/comunicati\/"},{"@type":"ListItem","position":2,"name":"Layout fluido con i Media Queries di Css3"}]},{"@type":"WebSite","@id":"https:\/\/www.article-marketing.eu\/comunicati\/#website","url":"https:\/\/www.article-marketing.eu\/comunicati\/","name":"Article Marketing","description":"article marketing & press release","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.article-marketing.eu\/comunicati\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.article-marketing.eu\/comunicati\/#\/schema\/person\/44372e4d4d0fa797b18e03ed1ace9017","name":"Redazione Comunicati Stampa","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.article-marketing.eu\/comunicati\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/50e5c6421d3072f42e7ace803501602c60d75233d34e29fd05feb91c8760b792?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/50e5c6421d3072f42e7ace803501602c60d75233d34e29fd05feb91c8760b792?s=96&d=mm&r=g","caption":"Redazione Comunicati Stampa"},"url":"https:\/\/www.article-marketing.eu\/comunicati\/author\/redazione-comunicati-stampa\/"}]}},"_links":{"self":[{"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/posts\/17177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/comments?post=17177"}],"version-history":[{"count":0,"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/posts\/17177\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/media?parent=17177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/categories?post=17177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.article-marketing.eu\/comunicati\/wp-json\/wp\/v2\/tags?post=17177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}