responsive.css

/**
 * Reponsive breakpoints
 * ----------------------------------------------
 * Responsive breakpoints for devices are referenced from
 * this url: http://iosres.com/ and used only `logical
 * resolutions` because of more usefullness.
 */
:root {
  /* watches */
  --watch: 136px;
  --watch-y: 170px;
  --watch-big: 156px;
  --watch-big-y: 195px;

  /* phones */
  --phone: 320px;
  --phone-y: 568px;
  --phone-big: 414px;
  --phone-big-y: 736px;

  /* tablets */
  --tablet: 768px;
  --tablet-y: 1024px;
  --tablet-big: 1024px;
  --tablet-big-y: 1366px;

  /* abstract */
  --960gs: 960px;

  /* screens */
  /* tip: sometimes they are very close to tablets */
  /* PS: we don't necessarily have to set vertical
    resolution for screens */
  --screen-tiny: 1225px;
  --screen-small: 1366px;
  --screen-medium: 1680px;
  --screen-big: 1920px;
  --screen-large: 2560px;

  /* TVs */
  /* tip: for TVs you must rethink configuring unit,
    you may need to use `vw` and `vh` instead */
  --tv-hd: 1366px;
  --tv-hd-y: 768px;
  --tv-fhd: 1920px;
  --tv-fhd-y: 1080px;
  --tv-wqhd: 2560px;
  --tv-wqhd-y: 1440px;
  --tv-4k: 3840px;
  --tv-4k-y: 2160px;
  --tv-8k: 7680px;
  --tv-8k-y: 4320px;
}

/* we can't use variables from top in `postcss-cssnext`
  to declare `@custom-media`. that's why we can't reuse
  them. */

/* watches */
@custom-media --bigger-than-watch (min-width: 136px);
@custom-media --smaller-than-watch (max-width: 136px);

@custom-media --bigger-than-watch-big (min-width: 156px);
@custom-media --smaller-than-watch-big (max-width: 156px);

/* phones */
@custom-media --bigger-than-phone (min-width: 320px);
@custom-media --smaller-than-phone (max-width: 320px);

@custom-media --smaller-than-phone-big (max-width: 480px);
@custom-media --bigger-than-phone-big (min-width: 480px);

/* tablets */
@custom-media --bigger-than-tablet (min-width: 768px);
@custom-media --smaller-than-tablet (max-width: 768px);

@custom-media --smaller-than-tablet-big (max-width: 1024px);
@custom-media --bigger-than-tablet-big (min-width: 1024px);

/* screens */
@custom-media --bigger-than-screen-tiny (min-width: 1225px);
@custom-media --smaller-than-screen-tiny (max-width: 1225px);

@custom-media --bigger-than-screen-small (min-width: 1366px);
@custom-media --smaller-than-screen-small (max-width: 1366px);

@custom-media --bigger-than-screen-medium (min-width: 1680px);
@custom-media --smaller-than-screen-medium (max-width: 1680px);

@custom-media --bigger-than-screen-big (min-width: 1920px);
@custom-media --smaller-than-screen-big (max-width: 1920px);

@custom-media --bigger-than-screen-large (min-width: 2560px);
@custom-media --smaller-than-screen-large (max-width: 2560px);

/* TVs */
@custom-media --bigger-than-tv-hd (min-width: 1366px);
@custom-media --smaller-than-tv-hd (max-width: 1366px);

@custom-media --bigger-than-tv-fhd (min-width: 1920px);
@custom-media --smaller-than-tv-fhd (max-width: 1920px);

@custom-media --bigger-than-tv-wqhd (min-width: 2560px);
@custom-media --smaller-than-tv-wqhd (max-width: 2560px);

@custom-media --bigger-than-tv-4k (min-width: 3840px);
@custom-media --smaller-than-tv-4k (max-width: 3840px);

@custom-media --bigger-than-tv-8k (min-width: 7680px);
@custom-media --smaller-than-tv-8k (max-width: 7680px);