Durante lo sviluppo di qualsiasi sito basato sul famoso Boostrap 3 si incontra ad un certo punto la necessità di scrivere del codice CSS custom per modificare la responsività del layout. Quindi, è comodo sapere già a priori quali sono i breakpoint di Bootstrap per le grandezze dello schermo, che generano appunto lo switch nelle grandezze delle colonne.
Con l'espression breakpoint si intendono quindi le media query che generano gli switch su tablet, cellulari, etc
Ecco il codice sorgente dei breakpoint, considerando che max-width si riferisce a tutto cioò che è "minore o uguale", mentre min-width si riferisce a tutto cioò che è "maggiore o uguale"
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Metodi "Mobile-First" ==========*/
/* iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Device molto piccoli, e smartphone */
@media only screen and (min-width : 480px) {
}
/* Device piccoli, e tablet */
@media only screen and (min-width : 768px) {
}
/* Tablet di media grandezza, schermi desktop piccoli */
@media only screen and (min-width : 992px) {
}
/* Device grandi e schermi per desktop */
@media only screen and (min-width : 1200px) {
}
/*========== Metodi "Desktop-First" ==========*/
/* Device grandi e schermi per desktop */
@media only screen and (max-width : 1200px) {
}
/* Tablet di media grandezza, schermi desktop piccoli */
@media only screen and (max-width : 992px) {
}
/* Device piccoli, e tablet */
@media only screen and (max-width : 768px) {
}
/* Device molto piccoli, e smartphone */
@media only screen and (max-width : 480px) {
}
/* iPhone Retina */
@media only screen and (max-width : 320px) {
}Queste regole vi torneranno molto utili come template di default per il vostro CSS custom basato su Bootstrap. Buon lavoro!
