【使用sass写组件化文件_bootstrap.scss时，媒体查询未完全生效 _媒体查询】

使用sass写组件化文件_bootstrap.scss时，媒体查询未完全生效

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

媒体查询

详细描述

截图

代码

//媒体查询的基本设置
//xl
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}
//lg
@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}
//md
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
//sm
@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}
//列的媒体查询
$list:(sm:576px, md:768px, lg:992px, xl:1200px);

@each $q,
$w in $list {
  @media (min-width: $w) {
    @for $var from 1 through 12 {
      .col-#{$q}-#{$var} {
        flex: 0 0 100%/12*$var;
        position: relative;
        width: 100%/12*$var;
        margin: 0 15px;
      }
    }
  }
}

  @for $var from 1 to 12 {
    .col-#{$var} {
      flex: 0 0 100%/12*$var;
      position: relative;
      width: 100%/12*$var;
      margin: 0 15px;
    }
}

编辑于2024-04-23

时间排序

热门排序

[上海|荣耀师兄]JS-左昌杰
0

小老弟从上往下渲染，你的顺序写错了当满足前面的媒体PX时上面的PX就会被前面的覆盖，所以在上面就不会生效！

查看全部>

编辑于2019-01-11

去第页