Question

我正在建立一个具有响应性媒体查询的网站。我有一个查询可以适应屏幕是否小于或等于900像素（最大宽度）的情况。我创建了一个mixin来帮助管理查询。

@mixin responsive ($breakpoint){
@if $breakpoint == phone {
    @media(max-width: 37.5em){ @content };  // 600px
}
@if $breakpoint == tab-port {
    @media(max-width: 56.25em){ @content };   // 900px
}
@if $breakpoint == tab-land {
    @media(max-width: 75em){ @content };  // 1200px
}
@if $breakpoint == big-desktop {
    @media(min-width: 112.5em){ @content };  // 1800px
 }
}

所以，我将在SASS中使用它

.div{

&__container {
    display: flex;
    padding: 5rem;
    margin: 0 auto;
    width: 80%;

    @include responsive(tab-port) {
        width: 90%;
    }

}

它可以正确编译

.div__container {
  display: flex;
  padding: 5rem;
  margin: 0 auto;
  width: 80%; 
}
  @media (max-width: 56.25em) {

.div__container {

 width: 90%; 
 } 
}

但是它实际上并没有以900px或更小的分辨率显示在网站上。我在做什么错了？

Answer 1

媒体查询可以正常工作，但是由于填充宽度不足80％。

.div {

  &__container {
      display: flex;
      // padding: 5rem;
      margin: 0 auto;
      width: 80%;
      border: 5px solid red;

      @include responsive(tab-port) {
          width: 90%;
          border: 5px solid blue;
      }

  }
}

示例：https://codepen.io/anon/pen/MxgaVR

SASS编译中的媒体查询但不显示

1 个答案: