尝试创建响应式视频网格。我希望使用基于 100% 宽度计算的标准 SASS 公式,而不是对每个媒体查询使用不同的 %,但不确定 SASS 是否可以做到这一点。以下公式中的 40 考虑了 2 x 20px 固定边距(即这将是一个 3 列网格)。
理想公式:
ul.videos {
li {
width: ((100% / 3) - 40);
}
}
CSS/SASS 有什么办法可以处理这个问题吗?如果可能的话,宁愿不要使用 JS。
最佳答案
这在 all major browsers 中是可能的使用 calc()
。
li {
display: inline-block;
width: calc(100% / 3 - 40px);
}
当然,您仍然可以在 SASS 文件中声明它,但这是一个纯 CSS 解决方案。这在 SASS 中是不可能的,因为 SASS 在生成样式表时不知道 100% 是什么,并且 100% 的像素值会随着文档大小的调整而波动。
关于css - SASS 数学计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19017555/