Блог

Главная - Вопросы по программированию - Как определить ширину изображения для маленького экрана только в портретном режиме?

Как определить ширину изображения для маленького экрана только в портретном режиме?

#html #css

#HTML #css

Вопрос:

Я хочу, чтобы баннер отображался на 50% ширины большого экрана (рабочий стол) и на 100% ширины на маленьком экране (iphone), когда он находится в портретном режиме. Когда оно находится в альбомной ориентации, оно должно составлять 50%.

На данный момент у меня есть

 .advert-img {
  width: 50%
  height: auto;
}
@media screen and (max-width: 380px) {
  .advert-img {
    width: 100%;
  }
}

Как мне учитывать дисплеи retina?

Комментарии:

1. поддерживается медиа-запрос orientation . Используйте это как @media (max-width: 380px) and (orientation: portrait) { ... } . Также существует конкретный запрос, который может работать для устройств retina, @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } . Вы можете попробовать и проверить, работает ли это для вас.

Ответ №1:

Для учета дисплеев retina вы можете использовать следующий CSS

 @media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Источник:https://css-tricks.com/snippets/css/retina-display-media-query /

Надеюсь, это поможет