Media query(come impostarle)

[alex27]

Salve, mi spiego meglio...il mio cellulare ha una risoluzione di 1200×750, come mai quando ridimensiono
Il browser alla stessa grandezza del mio cellulare, in realtà nel browser sono sceso sotto
I 400px??? Cioè i 750px del mio browser del pc risultano molto più grandi della dimensione dello schermo
Del mio snartphone...c'è correlazione tra risoluzione e dimensione
???

[KillerWorm]

Salve, in che modo stai effettuando il confronto tra pc e smartphone?

Da come hai descritto la questione mi viene da pensare che tu stia semplicemente poggiando il cellulare sullo schermo del pc e quindi vai a ridimensionare la finestra del browser (nello schermo del pc) per renderti conto che le due "risoluzioni" (in pixel) non corrispondono. Se così fosse può essere normale che ci sia una differenza anche sostanziale tra le risoluzioni dei due differenti schermi.

Facciamo però attenzione a quando parliamo di "risoluzione" in senso generico. A grandi linee si parla di "risoluzione dello schermo" per definire la dimensione in pixel (larghezza per altezza), ma ciò che fa la differenza, in questo caso, è la "risoluzione grafica", cioè la densità di pixel per ogni pollice lineare dello schermo, che viene definita in PPI (Pixel Per Inch).

Quanti più pixel ci stanno in un pollice, maggiore è la densità di pixel e migliore è la definizione dell'immagine. Perciò, a parità di risoluzione dello schermo, l'immagine risulterà più piccola in un dispositivo che ha una migliore definizione rispetto ad uno che ha una definizione più bassa.

I display dei moderni smartphone hanno generalmente delle definizioni più elevate rispetto agli schermi dei pc (non c'è comunque una regola fissa). Da questo potrebbe dipendere la differenza che riscontri.

In questo caso se ti serve impostare il CSS in base alla "definizione" dello schermo, piuttosto che alla sua "risoluzione", esistono varie media query che potrebbero aiutare.

Vedi qualche articolo:
CSS e immagini per gli schermi ad alta densità di pixel
Gestione immagini retina display nei siti web.html
CSS3 media queries for Retina & other high PPI screens
CSS: React to Display Density for Responsive Design
HD & Retina Display Media Queries
Pixel density and Resolution tool for CSS media queries

[alex27]

Salve, in che modo stai effettuando il confronto tra pc e smartphone?

Da come hai descritto la questione mi viene da pensare che tu stia semplicemente poggiando il cellulare sullo schermo del pc e quindi vai a ridimensionare la finestra del browser (nello schermo del pc) per renderti conto che le due "risoluzioni" (in pixel) non corrispondono. Se così fosse può essere normale che ci sia una differenza anche sostanziale tra le risoluzioni dei due differenti schermi.

Facciamo però attenzione a quando parliamo di "risoluzione" in senso generico. A grandi linee si parla di "risoluzione dello schermo" per definire la dimensione in pixel (larghezza per altezza), ma ciò che fa la differenza, in questo caso, è la "risoluzione grafica", cioè la densità di pixel per ogni pollice quadrato dello schermo, che viene definita in PPI (Pixel Per Inch).

Quanti più pixel ci stanno in un pollice, maggiore è la densità di pixel e migliore è la definizione dell'immagine. Perciò, a parità di risoluzione dello schermo, l'immagine risulterà più piccola in un dispositivo che ha una migliore definizione rispetto ad uno che ha una definizione più bassa.

I display dei moderni smartphone hanno generalmente delle definizioni più elevate rispetto agli schermi dei pc (non c'è comunque una regola fissa). Da questo potrebbe dipendere la differenza che riscontri.

In questo caso se ti serve impostare il CSS in base alla "definizione" dello schermo, piuttosto che alla sua "risoluzione", esistono varie media query che potrebbero aiutare.

Vedi qualche articolo:
CSS e immagini per gli schermi ad alta densità di pixel
Gestione immagini retina display nei siti web.html
CSS3 media queries for Retina & other high PPI screens
CSS: React to Display Density for Responsive Design
HD & Retina Display Media Queries
Pixel density and Resolution tool for CSS media queries

Grazie, sei stato chiarissimo...quindi se voglio creare media Query in base alla risoluzione,ad esempio, voglio creare il template per il mio Samsung s3, devo crearlo sui 750px del browser del pc??se voglio vedere dal browser come si vedrà sul mio Samsung intendo...

[KillerWorm]

Personalmente non so dirti di più