[Адаптивная вёрстка] Какие пиксели использует 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). 

> Если я не ошибаюсь, то картинка должна занять четверть элемента (1/2 ширины, 1/2 высоты).

  

Ошибаетесь. Целиком элемент и займет. Всё в браузере оперирует логическими пикселями.  

Это же логично. Почему, по-вашему, часть стилей должна оперировать логическими пикселями, а часть «настоящими»?  

Потому, вариант 2. 

> у меня есть устройство с pixel-ratio = 2

  

Это откуда следует? Величина *devicePixelRatio* давно уже переменная и зависит не только от соотношения физических пикселей и разрешения устройства, но и от соотношения страницы к *viewport*, и даже от банального увеличения.  

Более 2-х лет назад прошла эта новость [habrahabr.ru/post/159419](http://habrahabr.ru/post/159419/)  
  

И не путайте пиксели *CSS* и физические пиксели устройства. Последние в правилах *CSS* вы вообще не затрагиваете (разве что краем в *Media Queries*). 

 Я думаю, правильным будет вариант 3 - сделать примитивную страничку на jsfiddle и открыть с мобильного 

 Что мешает попробовать в инструментах разработчика? (F12, device mode)