更少CSS - 如何使用(vw)在视口中返回值

时间:2015-10-14 13:26:01

标签: less

较小百分比函数返回(%)中的值 - 哇!

element {
  width: percentage(700 / 1400);
}

将编译为:

element {
  width: 50%;
}

在(vw)中获取值的最佳方式或语法是什么,以便样式将编译为: (记住需要使用除法功能。(700/1400))

element {
  width: 50vw;
}

1 个答案:

答案 0 :(得分:4)

实现预期输出的最佳方法是将该值乘以100vw。这将是最有意义且易于理解的方法。

a{
  width: 700/1400 * 100vw;
}

以下使用unit()功能的方法也有效但我不会真的推荐它。

我不推荐它的一个主要原因是因为我不确定假设是否能像它一样工作。 unit()函数应该将一个数字作为其第一个参数并将单位添加到它,但百分比值不是一个数字,这可能在将来的版本中不起作用,具体取决于Less核心团队如何查看它< /撞击>

我阅读了文档,似乎第一个参数可以是带或不带维度的数字,但我仍然不推荐它,因为早期的方法比使用函数更容易理解。

b{
  width: unit(percentage(700/1400), vw);
}