Question

没有填充但宽度较小的包装

我正在使用较小的包装器而不是网站的填充或边距。这是因为我们的网格系统不喜欢填充和填充。

我想根据装订线尺寸使用宽度。

我的想法，例如：

包装纸的总宽度为100％我想要它周围2％的空间，所以排水沟的大小将是2％在那之后，我会做width: 100% - (2* guttersize); - 那是每个方面的2％

屏幕尺寸较小时如何更改？

现在我想在屏幕尺寸变小时更改宽度。因此，当屏幕变小时，我会做width: 100% - (4*guttersize);

之类的事情

如何在Less中完成这项工作？

我现在有了这个：

#responsiveLayout > .set(1200px);
@media (max-width:1200px) and (min-width:768px){
     #responsiveLayout > .set(1200px);
}
@media (max-width: 767px) and (min-width:480px) {
    #responsiveLayout > .set(767px);
}
@media (max-width : 479px) {
    #responsiveLayout > .set(479px);
}


#responsiveLayout {
    .set(@availableW) {
        @wrapperW : 100%;
    }
    .set(@availableW) when (@availableW =< 1200){
        @wrapperW : 100% - (@gutter*4);
        @gutterSize: @gutter*4;
        .wrapper{
            width: @wrapperW;
        }
        .menuBar{
            padding: 0 @gutter;
        }
    }
    .set(@availableW) when (@availableW =< 767){
        @wrapperW : 100% - (@gutter*4);
        @gutterSize: @gutter*4;
        .wrapper{
            width: @wrapperW;
        }
        .menuBar{
            padding: 0 @gutter;
        }
    }
    .set(@availableW) when (@availableW =< 479){
        @wrapperW : 100% - (@gutter*6);
        @gutterSize: @gutter*3;
        .wrapper{
            width: @wrapperW;
        }
        header{
            .wrapper{
                width: 100%;
            }
        }
    }
}

它有点工作但css被覆盖了太多次。我想过（@availableW =＆lt; 799）和（@availableW =＆gt; 479），但由于某种原因，它也无效。

有什么想法吗？

谢谢！

Answer 1

如果我正确理解你的问题，我会尝试这样的事情：

<强> LESS：

@screenL:~"screen and (min-width: 1024px)";
@screenM:~"screen and (min-width:768px and max-width:1023px)";
@screenS:~"screen and (max-width:767px)";
@gutter:100px;
@media @screenS{
    .wrapper{
        width:@gutter * .98;
    }
}
@media @screenM{
    .wrapper{
        width:@gutter * .95;
    }
}
@media @screenL{
    .wrapper{
        width:@gutter * .92;
    }
}

CSS输出：

@media screen and (max-width:767px) {
  .wrapper {
    width: 98px;
  }
}
@media screen and (min-width:768px and max-width:1023px) {
  .wrapper {
    width: 95px;
  }
}
@media screen and (min-width: 1024px) {
  .wrapper {
    width: 92px;
  }
}

减：根据装订线变量更改不同屏幕上的包装宽度

1 个答案: