我试图使布局的断点变量较小,这样我就可以轻松地检查多个想法,但是:
@breakpoint: 500px;
@media all and (min-width: @breakpoint){
#someid{
height: 4321px;
}
}
@media all and (min-width: @breakpoint + 1){
#someid{
height: 1234px;
}
}
#someid{
height: @breakpoint + 1;
}
编译为:
@media all and (min-width: 500px) {
#someid {
height: 4321px;
}
}
@media all and (min-width: 500px + 1) { /*THE PROBLEM*/
#someid {
height: 1234px;
}
}
#someid {
height: 501px;
}
对变量的计算不会在媒体查询中发生,或者至少不会以我期望的方式发生。这种行为有解决方法吗?这也是一个错误吗?我应该将其归档吗?
就像 CSS 逻辑一样calc()
方法,媒体查询中的方程(已经由一组括号封装)需要由一组额外的括号封装。这是行不通的:
(min-width: 500px + 1) {CSS goes here}
但这会:
(min-width: (500px + 1px)) {CSS goes here}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)