scss 方便的sass mixin用于媒体查询

Posted 2021-05-18

$break-small: 320px;
$break-large: 1024px;

 @mixin  respond-to($media) {
   @if  $media == handhelds {
     @media  only screen and (max-width: $break-small) { @content; }
  }
   @else  if $media == medium-screens {
     @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
   @else  if $media == wide-screens {
     @media only screen and (min-width: $break-large) { @content; }
  }
   @else  if $media == retina-screens {
     @media  only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) and (min-device-pixel-ratio: 1.5) and (-webkit-min-device-pixel-ratio: 1.5) { @content; }
  }
}

.profile-pic {
  float: left;
  width: 250px;
  @include  respond-to(handhelds) { width: 100% ;}
  @include  respond-to(medium-screens) { width: 125px; }
  @include  respond-to(wide-screens) { float: none; }
  @include  respond-to(retina-screens) {background-image:url()}
}