尝试获取 CSS3 中两个值的最小值和最大值

Question

我正在尝试使用 Ionic4 设置 phone 宽度的图像，但是当我将 phone 设置为横向模式时，我需要它来使用高度。所以基本上使用最小尺寸，另外一个地方（最大）还需要相反的功能。

我尝试使用 min() 和 max() 函数，但显然它不起作用，我搜索了它，有人说它已被弃用。（我不介意任何不同的方法）

.heart-style {
 position: absolute;
 right: 0;
 top: 0;
 width: min(10vw, 10vh);
 height: min(10vw, 10vh);
}

.welcome-card ion-img {
 height: max(30vh, 30vw);
 object-fit: cover;
}

这是我在尝试 min() 或 max() 函数时得到的结果：

编译失败

./src/app/home/home.page.scss 模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：不兼容的单位：'vh' 和 'vw'.

我也尝试了不同的单位，但都是一样的。

Answer 1

您可以使用 @media (orientation: ...) 媒体查询来检测您是在 landscape（这意味着视口 width 大于 height）还是在 portrait（这意味着视口 width 等于或小于然后 height）。

.heart-style {
  position: absolute;
  right: 0;
  top: 0;
  width:10vw;
  height:10vw;
}

.welcome-card ion-img {
  height: 30vh;
  object-fit: cover;
}

@media (orientation: landscape) {
  /* 1vw is > 1vh now */
  .heart-style {
    width:10vh;
    height:10vh;
  }

  .welcome-card ion-img {
    height:30vw;
  }
}

/* just for debugging */
.heart-style {
  background: blue;
}
.welcome-card ion-img {
  display: block;
  background: yellow;
}

<div class="heart-style">
  heart
</div>

<div class="welcome-card">
  <ion-img>
    img
  </ion-img>
</div>

Answer 2

安装离子插件的更好方法ionic-native/screen-orientation它提供了在 JS 代码和许多其他选项中检测屏幕方向的灵活性。

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

constructor(private screenOrientation: ScreenOrientation) { }

...


// get current
console.log(this.screenOrientation.type); // logs the current orientation, example: 'landscape'

这是官方的URL native/screen-orientation

尝试获取 CSS3 中两个值的最小值和最大值

Trying to getting the minimum & maximum size of two values in CSS3

css

image-size

ionic-framework