+ Rispondi alla Discussione
Risultati da 1 a 2 di 2

Realizzare un layout elastico (come in esempoi)

Ultimo Messaggio di MiWebDesign il:
  1. #1
    User L'avatar di Atmel
    Data Registrazione
    Jun 2010
    Messaggi
    20

    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!

  2. #2
    Moderatore L'avatar di MiWebDesign
    Data Registrazione
    May 2015
    Località
    Palermo
    Messaggi
    210
    Segui MiWebDesign su Twitter Aggiungi MiWebDesign su Google+ Aggiungi MiWebDesign su Facebook Aggiungi MiWebDesign su Linkedin
    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.

    Codice:
    #divuno,#divdue{
    width:50%;
    float:left;
    }
    @media ( max-width: 768px ) {
    #divuno,#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.

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.