• A
    User •

    Realizzare un layout elastico (come in esempoi)

    Buongiorno a tutti voi.

    Non ne capisco molto di css, quindi la mia domanda potrebbe esserre banale.

    Volevo chiedervi un aiuto sul capire come è realizzata una pagina che ha quanto pare ha un layout fluido (spero si dica così).

    La pagina è la seguente:
    AccaTiTiPì : infobitsolution.in/WORK/bracelet/release/V2/index.htm

    Provate a caricarla con l'inspector di Chrome in layout mobile. Noterete che al restringimento della larghezza il contenuto si adatta perfettamente in percentuale.

    Ora sto realizzando una pagina simile, ma non riesco a fare quello che è stato realizzato in questa pagina.

    Qualcuno, ispezionando il codice, sa dirmi il fattore determinante che dà questo effetto alla pagina?

    Grazie!

    0
  • M
    Moderatore •

    Ciao Atmel, sicuramente il passaggio mancante per ciò che ti serve sono le media query.

    In CSS, puoi modificare i valori delle tue classi e dei tuoi ID in funzione della larghezza dello schermo o di molti altri parametri.

    Un esempio pratico e veloce per capire la sintassi potrebbero essere due DIV che occupano il 50% dello spazio che diventano al 100% e uno sotto l'altro quando vengono visualizzati da Tablet.

    
#divuno,#divdue{
width:50%;
float:left;
}
@media ( max-width: 768px ) {,#divdue{
width:100%;
float:none;
}
}

    Comunque puoi usare Bootstrap per realizzare Layout Responsive senza ammazzarti troppo la vita, è un Framework che ti permette di utilizzare classi che hanno già dei Breakpoint predefiniti per la maggior parte delle views.

    0
Effettua l'accesso per rispondere