@coderlex

[Адаптивная вёрстка] Какие пиксели использует background-size (logical / device)?

Под логическими я имею в виду, что при переходе к экранным к ним будет применяться масштабирование на значение pixel-ratio.

Т.е. допустим, у меня есть устройство с pixel-ratio = 2 и элемент с width = 100px, height = 100px с картинкой на бэкграунде 100x100. Если я не ошибаюсь, то картинка должна занять четверть элемента (1/2 ширины, 1/2 высоты).

Но какого размера станет отображаемая картинка на этом устройстве при background-size = 100px? Вижу 2 варианта:
1. Ничего не изменится. Т.е. background-size определяет размер в пикселях картинки (они же device pixels).
2. Картинка зальёт весь квадрат элемента. Т.е. background-size задает размер в логических пикселях (в тех, которыми задавались width и height).
  • Вопрос задан
  • 332 просмотра
Решения вопроса 2
Если я не ошибаюсь, то картинка должна занять четверть элемента (1/2 ширины, 1/2 высоты).

Ошибаетесь. Целиком элемент и займет. Всё в браузере оперирует логическими пикселями.
Это же логично. Почему, по-вашему, часть стилей должна оперировать логическими пикселями, а часть «настоящими»?
Потому, вариант 2.
Ответ написан
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
у меня есть устройство с pixel-ratio = 2

Это откуда следует? Величина devicePixelRatio давно уже переменная и зависит не только от соотношения физических пикселей и разрешения устройства, но и от соотношения страницы к viewport, и даже от банального увеличения.
Более 2-х лет назад прошла эта новость habrahabr.ru/post/159419

И не путайте пиксели CSS и физические пиксели устройства. Последние в правилах CSS вы вообще не затрагиваете (разве что краем в Media Queries).
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
nazarpc
@nazarpc
Open Source enthusiast
Я думаю, правильным будет вариант 3 - сделать примитивную страничку на jsfiddle и открыть с мобильного
Ответ написан
@AndreyMyagkov
Что мешает попробовать в инструментах разработчика? (F12, device mode)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы