Responsive breakpoints

[M4TThys123]

Breakpoints op basis van mijn XD designs & Bootstrap classes.

/* XS (for phones - screens < than 768px wide) */
@media (max-width: 767px) {
  /* CSS rules for phones go here */
}

/* SM (for tablets - screens ≥ than 768px wide) */
@media (min-width: 768px) {
  /* CSS rules for tablets go here */
}

/* MD (for small laptops - screens ≥ than 992px wide) */
@media (min-width: 992px) {
  /* CSS rules for small laptops go here */
}

/* LG (for laptops and desktops - screens ≥ than 1200px wide) */
@media (min-width: 1200px) {
  /* CSS rules for laptops and desktops go here */
}

Breakpoints op basis

Ik kwam op basis van een video KevinPowell dat ik mijn media queries niet helemaal correct schrijf tussen XS <> SM screens.

• XS: max-width: 767px
• SM: min-width: 768pxEr zit een pixel tussen waarbij het fout gaat.

Fix:

/* XS (for phones - screens < than 768px wide) */
  @media (width < 768px) {
    /* CSS rules for phones go here */
  }

  /* SM (for tablets - screens ≥ than 768px wide) */
  @media (width >= 768px) {
    /* CSS rules for tablets go here */
  }

  /* MD (for small laptops - screens ≥ than 992px wide) */
  @media (width >= 992px) {
    /* CSS rules for small laptops go here */
  }

  /* LG (for laptops and desktops - screens ≥ than 1200px wide) */
  @media (width >= 1200px) {
    /* CSS rules for laptops and desktops go here */
  }

Commiten van nieuwe @media queries