breakpoints.css (cssnext)

breakpoints.css

/* breakpoints */
:root {                                   /* px size at 16px base font size */                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
  @custom-media --xs (width < 20em);      /* 320px */
  @custom-media --s (width < 28em);       /* 448px */
  @custom-media --m (width < 48em);       /* 768px */
  @custom-media --l (width < 64em);       /* 1024px */
  @custom-media --xl (width < 80em);      /* 1280px */
  @custom-media --hd (width < 112.5em);   /* 1800px */  
 
  @custom-media --above-xs (width >= 20em);
  @custom-media --above-s (width >= 28em);  
  @custom-media --above-m (width >= 48em); 
  @custom-media --above-l (width >= 64em);
  @custom-media --above-xl (width >= 80em);
  @custom-media --above-hd (width >= 112.5em); 
    
  @custom-media --retina (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
  @custom-media --landscape (orientation: landscape);
  @custom-media --portrait (orientation: portrait);  
}

/* call it */
.foo {
  border: 1px solid green;
  
  @media (--above-s) {
    border: 3px solid red
  }
}