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]
相关文章推荐
- C#查询数据库时问题: Min(1) must be less than or equal to max(-1) in Range object
- 揭开CSS3媒体查询迷雾(min-width和max-width)
- 揭开CSS3媒体查询迷雾(min-width和max-width)
- IE6不支持max-width和min-height解决问题
- 解决IE6中不能实现min-width和max-width的问题
- 转:IE6下的min-height,min-width,max-height,max-width问题
- CSS中min-height、min-width、max-width、max-height的理解及优先级问题
- 在table设置max-width以及min-width兼容问题和解决方案
- 媒体查询——>@media screen and (min-width: 768px)
- min-width和max-width的兼容问题
- 查询光猫厂家为ZTE,且内存范围在0到100之间,统计去掉重复的loid之后的数量,并计算出内存的avg,max,min,sum
- 此像素非彼像素(viewport与苹果的变化)css媒体查询-width与device-width的区别
- [工作问题总结]max-width min-width
- 利用媒体查询解决固定定位按钮被呼出键盘影响的问题
- Linq查询Count、Sum、Min、Max、Average
- css媒体查询之device-width
- Hibernate hql查询语句 Count:统计函数 Min:求最小值函数 Max:求最大值函数 Sum:求和函数 Avg:求平均数函数
- 解决IE6不支持CSS中的min-width/height属性问题
- max(min)-device-width和max(min)-width的区别
- matlab实现图割算法中的最大流最小割Max-flow/min-cut问题(一)