Realizzazione siti web responsive con css e html

[Gianluca Gradin]

Buongiorno vi volevo chiedere un paio di cose sulla realizzazione di siti web responsive.
Visitate il sito www.digital-vision.it l'ho realizzato con css e html.
Vedendolo su uno smartphone lo vedo ancora largo e per vedere i caratteri occorre ingrandire.
Avete dei consigli? Bisogna fare un sito diverso in riferimento al dispositivo?

 

[Soulfearor]

Cosa intendi scusa? io l'ho vedo bene. Quando faccio i siti in responsive (ovvero tutti) li programmo inizialmente a schermo da pc e poi uso le varie media query per toccare tutti gli attributi delle classi che devono cambiare.

Te lo racchiudo nel tag HTML anche se è codice CSS

@media (min-width: 400px) {
     .divnome {font-size:8px;}
}

@media (min-width: 539px) {
     .divnome {font-size:9px;}
}

@media (min-width: 768px) {
     .divnome {font-size:10px;}
}

@media (min-width: 992px) {
     .divnome {font-size:11px;}
}

@media (min-width: 1200px) {
     .divnome {font-size:12px;}
}

Ciao!

 

[Gianluca Gradin]

Cosa intendi scusa? io l'ho vedo bene. Quando faccio i siti in responsive (ovvero tutti) li programmo inizialmente a schermo da pc e poi uso le varie media query per toccare tutti gli attributi delle classi che devono cambiare.

Te lo racchiudo nel tag HTML anche se è codice CSS

@media (min-width: 400px) {
     .divnome {font-size:8px;}
}

@media (min-width: 539px) {
     .divnome {font-size:9px;}
}

@media (min-width: 768px) {
     .divnome {font-size:10px;}
}

@media (min-width: 992px) {
     .divnome {font-size:11px;}
}

@media (min-width: 1200px) {
     .divnome {font-size:12px;}
}

Ciao!

Si lo so' che si vede però un cliente mi ha fatto notare su smartphone che visitando il sito web bisogna zoomare per leggere. In pratica i div del sito dovrebbero allargarsi e quindi anche i font ma non in riferimento alla risoluzione (molti smartphone hanno risoluzioni elevate, ma essendo lo schermo piccolo per forza di cose i font non si leggono) ma al dispositivo proprio. Quindi un div largo magari senza immagine o con immagine + grande e i font ad una grandezza leggibile su quel dispositivo. Con i @media si puo' fare? Esiste una guida on line??

 

[Soulfearor]

Si lo so' che si vede però un cliente mi ha fatto notare su smartphone che visitando il sito web bisogna zoomare per leggere. In pratica i div del sito dovrebbero allargarsi e quindi anche i font ma non in riferimento alla risoluzione (molti smartphone hanno risoluzioni elevate, ma essendo lo schermo piccolo per forza di cose i font non si leggono) ma al dispositivo proprio. Quindi un div largo magari senza immagine o con immagine + grande e i font ad una grandezza leggibile su quel dispositivo. Con i @media si puo' fare? Esiste una guida on line??

Beh se il cellulare ha schermo piccolo si può fare ben poco, di solito le larghezze che ho usato sopra per le media query sono quelle standard ma se ti fai dire la risoluzione puoi crearne un'altra apposita per quel dispositivo.

In ogni caso devi seguire l'esempio che ti ho fatto sopra.

es: se hai 2 div affiancati

<div class="col1"></div>
<div class="col2"></div>

e a risoluzione da monitor sono affiancati perchè hanno una larghezza del 50% entrambi, tu nella risoluzione da cellulare puoi aumentare quella larghezza a 100% e mandarli a capo, in questo modo ingrandirai anche le scritte agendo su di esse.
Per quanto riguarda le immagini se non sono indispensabili fai la stessa cosa facendole passare da display:block; a display:none; applicando il cambiamento al div che le contiene.

.col1 {
   display:block;
   float:left;
   width:100%;
   font-size:14px;
}

.col 2 {
   display:block;
   float:left;
   width:100%;
   font-size:14px;
}

@media (min-width: 768px) {
   .col1 {
      width:50%;
      font-size:12px;
   }

   .col 2 {
      width:50%;
      font-size:12px;
   }
}

Con questo esempio ci sarà un cambiamento quando la risoluzione supera i 768px rispetto a quando non li supera.

p.s. le media query le ho imparate usando questo framework http://getbootstrap.com/

Ciao