scss 媒体查询Sass

Posted 2021-05-17

$min-width-tablet: 768px;
$screen-min-width-tablet: 'only screen and (min-width: #{$min-width-tablet})';

@media #{$screen-min-width-tablet} {
}

$iphone5: 'screen and (device-aspect-ratio: 40/71)';
$iphone6-7-8: 'screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2)';

.mb-10 {
  @media #{$iphone5}, #{$iphone6-7-8} {
    margin-bottom: calc(10vh * 1.2);
  }
}