Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2019
    Messaggi
    17

    Media query(come impostarle)

    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
    ???

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,394
    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
    Ultima modifica di KillerWorm; 31-07-2019 a 14:25
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Jul 2019
    Messaggi
    17
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    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...

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,394
    Personalmente non so dirti di più
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.