在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));
}