Попытка получить минимальный и максимальный размер двух значений в CSS3 - PullRequest
Новая
       28

Попытка получить минимальный и максимальный размер двух значений в CSS3

0 голосов
/ 05 июня 2019

Я пытаюсь установить изображение ширины моего телефона с помощью 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'.

и я тоже пробовал юниты, но тоже самое.

Ответы [ 2 ]

0 голосов
/ 05 июня 2019

Лучший способ установить ионный плагин 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 собственный / ориентация на экран

0 голосов
/ 05 июня 2019

Вы можете использовать @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>
...