Дисплеи сетчатки, фоновые изображения с высоким разрешением
это может звучать как глупый вопрос.
если я использую этот фрагмент CSS для обычных дисплеев (где box-bg.png
200px на 200px);
.box{
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
}
и если я использую медиа-запрос, подобный этому, для целевых дисплеев retina (с изображением @2x, являющимся версией с высоким разрешением);
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box{background:url('images/box-bg@2x.png') no-repeat top left;}
}
мне нужно удвоить размер .box
div до 400px на 400px, чтобы соответствовать новому фоновому изображению с высоким разрешением?
3 ответа:
нет, но вам нужно установить
background-size
свойство для соответствия исходным размерам:@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{ background:url('images/box-bg@2x.png') no-repeat top left; background-size: 200px 200px; } }
EDIT
чтобы добавить немного больше к этому ответу, вот запрос обнаружения сетчатки, который я обычно использую:
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { }
NB. Это
min--moz-device-pixel-ratio:
это не опечатка. Это хорошо документированная ошибка в некоторых версиях Firefox и должна быть написана так, чтобы поддерживать более старые версии (до Firefox 16). источник
как @LiamNewmarch упоминается в комментариях ниже, вы можете включить
background-size
в стенографииbackground
декларации вот так:.box{ background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px; }
однако я лично не советовал бы использовать сокращенную форму, поскольку она не поддерживается в iOS
вот решение, которое также включает в себя высокий (er)DPI ( MDPI) устройств > ~160 точек на дюйм как довольно много устройств без iOS (например:Google Nexus 7 2012):
.box { background: url( 'img/box-bg.png' ) no-repeat top left; width: 200px; height: 200px; } @media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ), only screen and ( min--moz-device-pixel-ratio: 1.3 ), only screen and ( -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */ only screen and ( min-device-pixel-ratio: 1.3 ), only screen and ( min-resolution: 124.8dpi ), only screen and ( min-resolution: 1.3dppx ) { .box { background: url( 'img/box-bg@2x.png' ) no-repeat top left / 200px 200px; } }
поскольку @3rror404 включен в его редактирование после получения обратной связи от комментариев, есть мир за пределами Webkit/iPhone. Одна вещь, которая меня беспокоит с большинством решений вокруг до сих пор, как тот, на который ссылается как источник выше в CSS-трюки, is что это не учитывается в полной мере.
Элемент первоисточник пошел уже дальше.в качестве примера экран Nexus 7 (2012) является экран TVDPI со странным
device-pixel-ratio
of1.325
. При загрузке изображений с нормальным разрешением они масштабируются с помощью интерполяции и поэтому размыты. Для меня применение этого правила в медиа-запросе для включения этих устройств удалось добиться наилучшей обратной связи с клиентами.
Если вы планируете использовать одно и то же изображение для экрана retina и non-retina, то вот решение. Скажите, что у вас есть образ
200x200
и есть два значка в верхнем ряду и два значка в нижнем ряду. Итак, это четыре квадранта..sprite-of-icons { background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat; background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */ } .sp-logo-1 { background-position: 0 0; } /* Reduce positioning of the icons down to 50% rather using -50px */ .sp-logo-2 { background-position: -25px 0; } .sp-logo-3 { background-position: 0 -25px; } .sp-logo-3 { background-position: -25px -25px; }
масштабирование и позиционирование значков спрайта до 50%, чем фактическое значение, вы можете получить ожидаемый результат.