Question

我正在尝试使用Ionic4设置手机宽度的图像，但是当我将手机设置为横向模式时，我需要使用它来代替高度。因此，基本上使用最小尺寸，并且在另一个位置（最大）也需要相反的功能。

我尝试使用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'

这是官方网址 native/screen-orientation

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

2 个答案: