根据方向从大众切换到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，少，无论如何），您无法动态设置值。您应该为所有条件和所有方向生成所有属性。
因此，应将@media块放在元素选择器范围中。在这些@media的内部，您应该设置大小。

sassmeister demo。

sass：

// $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);
  }
}

CSS：

@media only screen and (orientation: landscape) {
  a {
    size: 5vh;
  }
}
@media only screen and (orientation: portrait) {
  a {
    size: 3.75vw;
  }
}