Checking screen sizes for responsive site

Question

I wrote this piece of code to make any breakpoint to the users choice:

@mixin breakpoint($media) {
  $max-width: 0;
  @if($media == 'phones') {
    $max-width: $phone-medium;

  } @else if ($media == 'monitors') {
    $max-width: $screen-medium;

  //etc etc etc

  } @else if($media > 0) {
    $max-width: $media;
  }

  @media only screen and  (max-width: $max-width) {
    @content;
  }
}

This function comes with these variables:

//Phone width sizes
$phone-small: 480px;
$phone-medium: 768px;


//Screen widths
$screen-small: 1024px;
$screen-medium: 1280px;
$screen-big: 1920px;

This can be used by typing:

@include breakpoint('phones') {
   ....
}

or

@include breakpoint(450px) {
   ....
}

Is there any better way to do this?

Answer 1

Personally, I think it's better to make the breaks according to the content of the site, rather than to a fixed size.

This is even more true nowadays with docens of different screen sizes for each type of device.

You should make sure the site will always look good by making the breaks work depending on the design, and no the other way around.