Magento2 less 媒体查询 max-width:1024 和 min-width1025问题

 

在less 文件里 

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l){

}

 @screen__l  定义的在 web/css/source/lib/variables/_responsive.less

这样得到的样式是适用于屏幕 大于 1024（包括Ipad pro）,但是我想要的是大于1025，因为ipad没有鼠标效果。

于是我想在 web/css/source/lib/variables/_responsive.less  自定义 @screen__l__prus ：1025 ，然后如下图这样，却不起作用。

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l__plus){

}

实在没办法就写成下面这样，但是这样less会解析是，会把样式同时包含 在 style-l  和 style-m 里面

 

 

 

 

 

后面才知道自己写了错误的less, 因为在 web/css/source/lib/_responsive.less  有配置

 

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l){

}
//需要配置如下

//最大 1024
    @media only screen and (max-width: @screen__l) {
        .media-width('max', @screen__l);
    }



.media-width(@extremum, @break) when (@extremum = 'max') and (@break = (@screen__l + 1)){

}
// 需要配置如下
// 大于等于1025（pc）
@media all and (min-width: (@screen__l + 1)),
    print {
        .media-width('min', (@screen__l + 1));
    }