根据方向从vw切换到vh

Question

我有从像素到大众的计算功能，它可以完美地用于纵向方向

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

但对于景观定位来说却很糟糕。很遗憾但是这样的功能不起作用

@function get-vw($target) { 
  $vw-context: (320*.01) * 1px;
  @media only screen and (orientation: landscape) {
    @return ($target/$vw-context) * 1vh;
  }
  @media only screen and (orientation: portrait) {
    @return ($target/$vw-context) * 1vw;
  }
}

有没有类似的问题？你是怎么解决的？

Answer 1

在css（sass，less，no matter）中，您无法动态设置值。您应该提前为所有条件和所有方向生成所有属性。 所以@media块应该放在元素选择器范围内。在这些@media中你应该设置尺寸。

Sassmefster kazxsopoi。

萨斯：

demo

CSS：

// $target: number in pixels
// $orientation: string - portrait (default) | landscape

@function get-vw($target, $orientation: portrait) { 
  $vw-context: (320 * .01) * 1px;
  $axis-unit: 1vw;

  @if ($orientation == landscape) {
    // Not shure about 240
    $vw-context: (240 * .01) * 1px;
    $axis-unit: 1vh;
  }

  @return ($target / $vw-context) * $axis-unit;
}

a {
  @media only screen and (orientation: landscape) {
    size: get-vw(12px, landscape);
  }
  @media only screen and (orientation: portrait) {
    size: get-vw(12px);
  }
}