media-query e risoluzione schermo

[VinzClortho]

Salve,
volevo chiede quali sono le risoluzioni più comuni per i vari device (tablet, smartphone e altri dispositivi mobile). Ad esempio bootstrap utilizza i seguenti breakpoint:
extrasmall <767px / small 768px / medium 992px / large 1200px

Sono misurazioni universalmente considerate valide, o sarebbe meglio adattarle di volta in volta in base ai propri contenuti?
Ci sono delle regole di massima a cui è bene attenersi nell'uso delle media-query?
Qual'è la risoluzione minima a cui un device più arrivare (o comunque di cui conviene tenere conto)?

Grazie

[fcaldera]

Salve,
Sono misurazioni universalmente considerate valide, o sarebbe meglio adattarle di volta in volta in base ai propri contenuti?

la seconda che hai detto.
lo sviluppo dovrebbe essere design-centrico, non device-centrico.


Se poi il design viene specificatamente costruito per rispondere a quelle specifiche risoluzioni allora non c'è differenza.

[VinzClortho]

purtroppo nel mio caso, il design è stato costruito da altri senza tenere esplicitamente conto della responsività. Mi sono spesso trovato ad utilizzare molte media-query con vari breakpoint, per mantenere omogenea la responsività del layout, ma non saprei dire se ho abusato dello strumento. Diciamo che ho dato più importanza alla visualizzazione che alla pulizia del codice, per cui mi chiedevo se ci fossero delle linee guida a cui attenersi.

[fcaldera]

ma non saprei dire se ho abusato dello strumento.

se non fai vedere come usi le mediaquery non possiamo dirlo
perché non prepari un esempio specifico da mostrare? un layout basilare con tutte le mq che ritieni necessarie per farlo visualizzare correttamente a vari breakpoint. Così è possibile parlare di qualcosa di concreto.

[VinzClortho]

Questo è un elenco dei breakpoint che ho utilizzato, per modificare regole css diverse. Ci sono dimensioni molto vicine, ma sono spesso stato costretto a farlo per rendere il più fluido possibile la responsibilità di alcuni elementi di layout.
Il design delle pagine che mi è stato dato, aveva infatti molti layout diversi (contenitore testo di larghezza e posizione differente, con margini differenti, spaziatura lettere e interlinea differenti e via dicendo...), e quindi gli stessi breakpoint non si adattavano a tutte le pagine, creando degli spicevoli effetti visivi, come elementi male allineati, margini sbagliati e via dicendo. Per cui alla fine ho preferito utilizzare tutti i mediaquery necessari, senza lesinare troppo.
Non so quale sia la risoluzione più piccola da dover garantire, quindi ho arbitrariamente scelto di arrivare fino ai 500px.

  
 /* Header*/ 
@media (max-width: 1048px)
 /* MENU*/      
@media (max-width: 1048px)
@media (max-width: 500px)
  /*PAGES*/  
@media (max-width: 1088px)
@media (max-width: 992px)
@media (max-width: 950px)
@media (max-width: 940px)
@media (max-width: 880px)
@media (max-width: 768px)
@media (max-width: 750px)
@media (max-width: 640px)
@media (max-width: 500px)