我正在尝试生成一些相对于屏幕高度的内容,并决定尝试使用 LESS 来生成类似的内容,即使作为测试有点重:
@baseHeight: 1px;
.setRelativeHeight(@screenHeight, @minHeightDiff, @maxHeightDiff) when(@screenHeight < 2400) {
@media (min-height: @baseHeight * @screenHeight) {
min-height: @baseHeight * (@screenHeight - @minHeightDiff);
max-height: @baseHeight * (@screenHeight - @maxHeightDiff);
}
.setRelativeHeight(@screenHeight + 20, @minHeightDiff, @maxHeightDiff);
}
这似乎大部分都有效,但这是它在调用它时生成的部分内容:
@media not all {
#ConversationMessages .messages {
max-height: 2100px;
min-height: 2000px;
}
}
@media not all {
#ConversationMessages .messages {
max-height: 2120px;
min-height: 2020px;
}
}
@media not all {
#ConversationMessages .messages {
max-height: 2140px;
min-height: 2040px;
}
}
@media not all {
#ConversationMessages .messages {
max-height: 2160px;
min-height: 2060px;
}
}
因此,样式设置正确,但媒体条件丢失:(有人知道为什么吗?:)
Thanks!!
Update修复了在媒体条件中添加括号的问题(请参阅下面的评论)。
里面的算术运算@media
查询应始终放在括号中,无论--strict-math选项。 IE。应该@media (min-height: (@baseHeight * @screenHeight))
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)