css - 在 SASS 中获取设备大小

Question

我想在 SASS 中获取设备的宽度和高度。因为我想为不兼容的平台创建以像素为单位转换 vw/vh 的函数。

我已经用 LESS 编写了这个函数

@w_device:`$(window).width()/100`;
@h_device:`$(window).height()/100`;

.vh(@v){
    @val:round(@h_device*@v*1px);
}
.vw(@v){
    @val:round(@w_device*@v*1px);
}

有人知道如何在 SASS 中执行此操作吗？

谢谢

Answer 1

我认为这与您的要求非常接近。

@function get-vw($target) { 
  $vw-context: (1000*.01) * 1px;
  @return ($target/$vw-context) * 1vw;
}

用法:

h1 {
  font-size: get-vw(72px);
}

由于 vw 是视口(viewport)的 1%，我们可以按比例缩放 px 大小。返回值可用于其他元素。 IE:图片、背景等

这是一个great article讨论几种 Sass 方法。