根据方向从vw切换到vh

I have such function to calc from pixels to vw and it works perfectly for portrait orientation

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

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

But awful for landscape orientation. It's a pity but such function doesn't work

但对于横向定位而言非常糟糕。遗憾的是这样的功能不起作用

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

Has anyone similar problem? How did you solve it?

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

1 个解决方案

#1

In css (sass, less, no matter) you can't dynamically set the values. You should generates all properties for all conditions and all orientations in advance.
So @media blocks should be placed in element selector scope. And inside these @media's you should set sizes.

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

Sassmeister demo.

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:

CSS：

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

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

#1