Question

因此，我制作了以下mixin并以特定顺序使用它们，但是它们无法按预期工作。

@mixin mediaX {
  @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
    @content;
  }
}

//iPhone 6,7,8
@mixin media6 {
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
    @content;
  }
}

//iPhone 6,7,8 Plus
@mixin media6Plus {
  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
    @content;
  }
}

//iPhone 5 and 5S
@mixin media5 {
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    @content;
  }
}

且使用情况如下

@include mediaX {
  .navigation {
    text-align: justify;
  }
}

@include media6Plus {
  .navigation {
    text-align: justify;
  }
}

@include media6 {
  .navigation {
    text-align: justify;
  }
}

@include media5 {
  .navigation {
    text-align: left;
  }
}

似乎只有media5在反映，有人可以解释出什么毛病以及为什么它如此工作吗？

Answer 1

根据上述媒体查询中的屏幕尺寸，规则存在冲突。因此，最后一个是默认情况下唯一适用的规则。我从未编写过基于设备的媒体查询，我通常根据屏幕大小来编写媒体查询。确保您根据屏幕尺寸而不是根据设备编写媒体查询，因为媒体查询只能选择屏幕尺寸而不是设备。

进行此类媒体查询。

//screen size 1200px and above
@mixin media6 {
    @media only screen and (min-device-width: 1200px) {
        @content;
        }
    }
//media query between 1200px and 992px
@mixin media6Plus {
  @media only screen and (min-device-width: 992px) and (max-device-width: 
  1199px) {
    @content;
  }
}

And then use them like this 
@include media6 {
  .navigation {
    text-align: justify;
  }
}

@include media6Plus {
  .navigation {
    text-align: left;
  }
}

SASS未按媒体查询顺序编译

1 个答案: