Better breakpoints

[Ayc0]

instead of just using the width (which is bad because it's easy to confuse a landscape phone and a portrait tablet, do something like:

const breakpoints = {
  // either width between 0-500 px and height between 0-800 px, or the opposite
  mobile: [[0, 500, 'px'], [0, 800, 'px']],
  // previous behavior
  tablet: [800, 1200, 'px']
};

[Ayc0]

What about better defaults?

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}
/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
    /* ... */
}
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) {
    /* ... */
}
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

Edit: it doesn't work that great (see https://bugzilla.mozilla.org/show_bug.cgi?id=1556983) :/