/*---------------------------------------------------------------------------
00-02 Media Query Reference (MQR) FRAMEWORK 2024-07-26
---------------------------------------------------------------------------*/
/* Mobile SML DOWN (Test @ 320px Wide) */
@media (max-width: 379px) {  }

/* Mobile MED */
@media (min-width: 380px) {  }

/*  Mobile MED ONLY */
@media (min-width: 380px) and (max-width: 559px) { }

/* Mobile LRG */
@media (min-width: 560px) {  }

/*  Mobile LRG ONLY */
@media (min-width: 560px) and (max-width: 759px) { }

/* Mobile DOWN */
@media (max-width: 759px) {  }

/* Tablet */
@media (min-width: 760px) { }

/* Tablet LRG */
@media (min-width: 1000px) {  }

/* Desktop SML */
@media (min-width: 1300px) { }

/* Desktop MED */
@media (min-width: 1500px) { }

/* Desktop LRG */
@media (min-width: 1800px) { }

/* Desktop XL */
@media (min-width: 2200px) { }

Browser Emulated Device Settings

Use these emulated device settings in your browser dev tools to test for the standard framework device breakpoints. They represent the display size for each breakpoint. The height is intentionally shorter than the average device aspect ratio to ensure the best above-the-fold design/layouts for all devices targeted in each breakpoint.