#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 /
Надеюсь, это поможет