• V
    Moderatore •

    Siti responsivi come si realizzano?

    Salve,
    non riesco a capire come si fa a trasformare un sito tradizionale in sito responsivo, quali sono le caratteristiche di un sito responsivo? script, regole css o cosa?

    0
  • P
    User Attivo •

    Hai provato a fare una ricerca su google con "guida responsive design"? Troverai una valanga di informazioni.

    0
  • V
    Moderatore •

    @Cesar said:

    Hai provato a fare una ricerca su google con "guida responsive design"?

    Si ma non ho trovato un post che mette in evidenza le differenze strutturali, la maggior parte delle guide ti spiegano come fare un sito responsivo riportando codice del tipo "prendi e fai copia incolla" senza soffernarsi su aspetti tecnici...

    0
  • P
    User Attivo •

    Hai letto questa guida: html.it/guide/responsive-web-design-la-guida/ ?

    0
  • I
    User Attivo •

    Le differenze è che il responsive design è l'insieme dei codici html,css che servono ad un sito per ridimensionarsi, adattarsi e modificarsi in base al dispositivo che lo visita (e alla sua risoluzione) facendo si che il sito mantenga sempre un aspetto ottimizzato.
    Parlando di codice posso farti esempi come max-width: 100%; utilizzato per evitare che un oggetto si "sputtani" in larghezza. Sto apprendendo queste cose in questi giorni e purtroppo non so dirti molto di più 🙂

    0
  • M
    User Attivo •

    Per le informazioni che ho ricavato online, ho visto che un sito responsive si crea utilizzando le media queries CSS3. Le media queries sono delle dichiarazioni di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media. Ad esempio, in un foglio di stile, possiamo trovare una media query di questo tipo:

    @media screen and (min-width: 768px) {
    ....istruzioni css....
    }

    Con questa media query verifichiamo che il media utilizzato sia lo schermo di un computer e che la sua larghezza minima sia di 768px; se le condizioni sono soddisfatte vengono eseguite le istruzioni css nelle parentesi graffe.
    In questo modo è possibile definire vari "breakpoint", ovvero diverse soglie dimensionali al di sopra delle quali o al di sotto delle quali sono eseguite diverse istruzioni CSS, che conferiscono, dunque, al sito un diverso design a seconda delle dimensioni dello schermo del dispositivo utilizzato. In questo modo il sito diventa "adattivo" e si visualizza in maniera ottimale su tutti i dispositivi.

    Inoltre per impedire che i dispositivi ridimensionino automaticamente il sito si scrive il seguente codice HTML nella sezione <head></head>:
    <meta name="viewport" content="width=device-width"/>

    Infine esistono delle librerie Javascript che rendono compatibili le media queries CSS3 con i browser più vecchi.

    Spero di averti chiarito un po' le idee 🙂

    0
Effettua l'accesso per rispondere