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内，您应该设置尺寸。

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

根据方向从vw切换到vh

1 个答案: