Risoluzioni per siti web

[Hackx]

Ciao a tutti

Sto progettando un sito web ...che su un monito da 23'' si vede alla perfezione mentre su un netbook da 10'' ... insomma devo giocherellare un po con lo scrollbar..

Vi è la possibilità di impostare, riconosciuto lo schermo, la percentuale di visualizzazione al 75%...poiché nel pc piccolo si vede alla perfezione a questa percentuali qui.

Spero che mi possiate aiutare.

Vi ringrazio moltissimo,
Andrea

 

[LorenzoPi]

sisi! devi definirlo nel css con le media query! comunque ormai adesso se progetti un sito web conviene farlo con un layout Responsive, cioè che si adatta automaticamente alla grandezza dello schermo! Bootstrap e Foundation sono ad esempio tra i framework più usati per la realizzazione di siti web responsive

 

[Hackx]

Ciao LorenzoPi ,

Davvero gentilissimo !!!

Guarda mi potresti fare anche un esempio di "media query" con :
minimo di width = 900px
massimo di = 1224px

e come risultato

La pagina si vede al 75% ?

Così da capire un po il funzionamento di tutto : )

Ti ringrazio moltissimo,
Andrea

 

[LorenzoPi]

Ecco qua:

/* stile css di default */
#mioElemento{
    width: 100%;
  }

/* Poi qui sotto ci sono i diversi casi e tu vedi quello che serve a te */

/* Primo caso in cui la width è >= a 900px, cioè se la larghezza dello schermo è almeno uguale o maggiore di 900px allora applico tutti gli stili che elenco dentro alla media query. In altre parole lo schermo del dispositivo deve avere almeno una larghezza pari o maggiore a 900px per poter applicare gli stili definiti dentro */
@media only screen and (min-width: 900px) {
  #mioElemento{
    width: 75%;
  }
}

/* Secondo caso in cui la width è <= a 1224px, cioè se la larghezza dello schermo è almeno uguale o minore di 1224px allora applico tutti gli stili che elenco dentro alla media query. In altre parole lo schermo del dispositivo deve avere almeno una larghezza pari o minore a 1224px per poter applicare gli stili definiti dentro */
@media only screen and (max-width: 1224px) {
  #mioElemento{
    width: 75%;
  }
}

/* Terzo caso in cui la width è compresa tra questo intervallo: 900px >= width <= a 1224px, cioè se la larghezza dello schermo è compresa tra 900px(compreso) e 1224px(compreso) allora applico tutti gli stili che elenco dentro alla media query */
@media only screen and (min-width: 900px) and (max-width: 1224px){
  #mioElemento{
    width: 75%;
  }
}

Spero si capisca!

 

[Hackx]

Ciao LorenzoPi ,

Niente da aggiungere una spiegazione perfetta.. Grazie mille davvero per tutti questi preziosi consigli

Andrea

 

[LorenzoPi]

prego! .. è molto utile sapere queste cose! soprattutto adesso che ormai fare un layout responsive è praticamente il minimo per un sito