aiuto media queries :messner: dubbi sui breakpoint.

[sossiogll]

Buona serata a tutti... Forse sarebbe meglio buona nottata dato l'orario :P Ad ogni modo, voglio chiedervi un consiglio... O meglio un chiarimento. Sto cercando di imparare il CSS, ma c'è una cosa che non riesco a comprendere. Ponendomi il problema di creare un sito responsive, ho subito appreso l'utilità dei media queries. Da quanto ho capito , questi funzionano in base alla risoluzione dello schermo dei dispositivi che visualizzano il sito. Una domanda mi sorge spontanea... Gli smartphone di ultima generazione hanno una risoluzione full hd. come far visualizzare a questi dispositivi la versione del mio sito web adattata ai cellulari se questi cadono tra i breackpoint riservati ai dispositivi con schermo ampio?? Ringrazio a chi si sia impegnato a leggere il messaggio fin qua Aspetto con ansia una vostra risposta.

[rash]

Cosa significa "cadono tra i breackpoint riservati ai dispositivi con ampio schermo"? I dispositivi mobile hanno si delle risoluzioni in hd ma è vero pure che le dimensioni dei loro schermi appartiene sempre a determinati range. Diverse sono le dimensioni per i televisori, monitor di computer ecc...

Ti posto una lista di media query che potrebbe farti chiarezza:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}