experimental breakpoints

breakpoints.scss

// breakpoints
@mixin desktop_up{
	// includes very large screens
	@media (min-width: 768px){
		@content;
	}
}
@mixin desktop{
	@media (min-width: 768px) and (max-width: 1024px){
		@content;
	}
}
@mixin desktop_down{
	@media (max-width: 1024px){
		@content;
	}
}
@mixin tablet_up{
	@media (min-width: 425px){
		@content;
	}
}
@mixin tablet{
	@media (min-width: 425px) and (max-width: 768px){
		@content;
	}
}
@mixin tablet_down{
	@media (max-width: 768px){
		@content;
	}
}
@mixin large_phone_up{
	@media (min-width: 375px){
		@content;
	}
}
@mixin large_phone{
	@media (min-width: 375px) and (max-width: 425px){
		@content;
	}
}
@mixin large_phone_down{
	@media (max-width: 425px){
		@content;
	}
}
@mixin medium_phone_up{
	@media (min-width: 320px){
		@content;
	}
}
@mixin medium_phone{
	@media (min-width: 320px) and (max-width: 375px){
		@content;
	}
}
@mixin medium_phone_down{
	@media (max-width: 375px){
		@content;
	}
}
@mixin small_phone{
	@media (max-width: 320px){
		@content;
	}
}

//usage --->
.myDiv{
  height: 80%;  
  width: 100%;
  
  @include medium_phone_up{
    height: 60%;
    width: 80%;
    align-self: center;
  }
}