您的位置:首页 > 其它

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

2019-07-31 13:42 399 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_39950233/article/details/97906041

 

在less 文件里 

[code].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 ,然后如下图这样,却不起作用。

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

}

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

 

 

 

 

 

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

 

[code].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));
}
[code] 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: