根据方向从大众切换到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 演示.

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;
  }
}