Fw

Wordpress Creative Developer

Adattare il Sito a Tutte le Risoluzioni – Adaptive CSS

  • Html Css
  • -

Nella tua vita da web designer almeno una volta ti sei chiesto: “Ma come c…o faccio ad adattare il sito a tutte le risoluzioni possibili?”

Adaptive CSS può essere la risposta a questa eterna domanda che non ci fa dormire la notte (forse sto esagerando).

Adattare sito a tutte le risoluzioni

Questo script rileva la risoluzione che si sta utilizzando e associa il foglio di stile; in particolare potrai stabilire un range di risoluzioni (da 800 a 1000 utilizza 800.css, da 1000 a 1200 1000.css e così via).

Se per caso javascript è disabilitato, basterà mettere il tag noscript e associare il foglio di stile per la versione mobile, come specificato nella pagina dello script.

Cosa ne pensi di questa soluzione? Tu come ti comporti per la versione mobile del tuo sito?

15 Commenti

  1. un’altro modo per creare versioni mobile di un sito è usare lo user-agent del browser!

  2. Ciao jury e benvenuto nel blog 😉

    Si certo ci sono molti modi ed è giusto conoscerli tutti per trovare poi quello più efficace.

  3. Ciao federico non ho capito come applicarlo al mio sito web, dal sito sopra citato ho scaricare la demo, come devo usarla per far si che il mio sito si adatti alle risoluzioni?
    Grazie scusa del disturbo 🙂

  4. fa forse per ipad e mobile è meglio utilizzare media queries, non deve caricare nessuno script o libreria e velocizza il caricamento delle pagine 😉

  5. ciao,
    io ho trovato molto utile questo sito:

    http://viewlike.us/

    ti consente di verificare il layout del tuo sito con diverse risoluzioni schermo.

    andrea

  6. Ciao Andrea e benvenuto nel blog 😉

    Ti ringrazio per la risorsa, la testerò sicuramente! 😉

  7. Io utilizzo la piattaforma jquery mobile e abilito il layout x dispositivi mobili grazie ad semplice script Java 😉

    Totale layout 2:
    – uno per risoluzione da pc
    – uno per qualsiasi dispositivo mobile, sia esso un tablet o uno smartphone

  8. il forum l’ho appena aperto devo imparare per personalizzarlo

    e quello che vedo in queste tue pagine è un gran bel lavoro, utilissimo per chi come me cerca aiuto.
    Mi complimento con te
    saluti

    Marisa

  9. Intanto grazie dell’ospitalità sul tuo blog fede! Ragazzi volevo sottoporvi un mio dilemma che mi fa sbattere la testa sui muri da qualche settimana! In pratica sto cercando di fare una app con adobe edge per poi trasferirla in xcode ed il risultato è bello etc… l’unico problema è che non si adatta al monitor… su iphone troppo grande e su ipad troppo piccola e siccome c’è anche tutto il discorso android sto cercando una soluzione. Noto che le app che scarichi da app store o dal market di android si adattano al monitor (quelle fatte da professionisti) per cui ci deve essere il modo per dare una regola di auto adattamento e poi si capisce facendo un esempio delle icone o oggetti nell’app su iphone sono piccole a misura e su ipad aumentano della giusta dimensione per cui penso che non è una cosa che modifica il layout e proprio una specie di zoom automatico.

  10. ciao fede,
    come devo fare per mettere questo adaptive.js?
    mi guidi un pò?
    con diverse risoluzioni i div si spostano completamente, mi sai dire come tenerli “fermi” per poi adattarli a diverse risoluzioni?
    grazie

  11. Ciao volevo capire dove devo posizionare sia il fil js che i file css e soprattutto questo codice:
    // Edit to suit your needs.
    var ADAPT_CONFIG = {
    // Where is your CSS?
    path: ‘assets/css/’,

    // false = Only run once, when page first loads.
    // true = Change on window resize and page tilt.
    dynamic: true,

    // Optional callback… myCallback(i, width)
    callback: myCallback,

    // First range entry is the minimum.
    // Last range entry is the maximum.
    // Separate ranges by “to” keyword.
    range: [
    ‘0px to 760px = mobile.css’,
    ‘760px to 980px = 720.css’,
    ‘980px to 1280px = 960.css’,
    ‘1280px to 1600px = 1200.css’,
    ‘1600px to 1920px = 1560.css’,
    ‘1940px to 2540px = 1920.css’,
    ‘2540px = 2520.css’
    ]
    };

  12. Salve a tutti, la domanda che vorrei porre è la seguente:

    Io ho rifatto la nuova homepage del mio sito web, nel momento in cui la visualizzo sul web tramite Chrome nel mio PC viene visualizzata correttamente secondo le regole da me impostate nel file CSS, ma se sempre dal mio PC provo a visualizzarla tramite Firefox o internet Explorer i contenuti della pagina non corrispondono alle regole del CSS, ad esempio i div spostati ecc…

    Sapreste per caso spiegarmi a cosa può essere dovuto tutto ciò?

    Grazie in anticipo!

    • Ciao Stefano, questo è un problema che ha afflitto anche me per numerosi giorni, ma cercando su internet ho trovato alcune guide che mi hanno illuminato. In sostanza, ogni browser ha un proprio css di base, che va a modificare la tua pagina web. Così sono stati create alcuni css reset (scaricabili dal web) che ti permettono di azzerare le caratteristiche di base di ogni browser. Comunque ti consiglio di cercare su siti specializzati maggiori informazioni sull’argomento. Ciaooo

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *