CSS Breakpoints и em unit

Question

Когда я попытался использовать em единиц с мультимедийными запросами, я заметил, что устройство основано на размере шрифта по умолчанию браузера, а не на корне html.
Он работает нечетно, когда я собираюсь установить 20em для ширины элемента, когда точка останова равна min-width: 20em. Оба устройства в этом случае не равны, потому что элемент 20em элемента основан на html font-size, а медиа-запрос основан на размере шрифта браузера по умолчанию.

Есть ли способ достичь такого же размера для использования с помощью блока em без определения дополнительной, отдельной переменной только для контрольных точек (@bp-size: 16.250em)?

html { 
 
    font-size: 0.813em; // 13px (assume default browser font-size: 16px) 
 
} 
 

 
.box { 
 
    width: 1em;   // 13px x 13px 
 
    height: 1em; 
 
    background-color: #000; 
 
    
 

 
    // Problem 
 
    
 
    @size: 20em; 
 

 
    @media screen and (min-width: @size) {  // 320px (20 x 16px) why not 260px? 
 
    width: @size;       // 260px (20 x 13px) 
 
    background-color: #f00; 
 
    } 
 
}

<div class="box"></div>

Answer 1

Я задал этот вопрос вскоре после твоего. Наконец я нашел definitive answer от html-богов, глубоко погруженных в Media Queries page.

Относительные единицы в медиа запросов основаны на первоначальной стоимости, что означает, что единицы никогда не основаны на результатах деклараций. Например, в HTML единица «em» относится к исходному значению «font-size».

Это не имеет значения, что вы установили в вашем HTML, запросы средств массовой информации всегда будут установлены на браузерах начального размера шрифта атрибута.

Answer 2

Это очень возможно - Что вы ищете является rem, а не em:

@size: 20rem; 

rem является относительно root элемента, в то время как em относительна к текущему элементу. См. W3 и TutsPlus для получения дополнительной информации в этом отношении.

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