Заставить медиа-запрос CSS использовать размер em HTML-документа, а не браузер?

I ' m пытается использовать медиа-запросы для изменения ширины элемента в кусках в зависимости от ширины окна (это позволяет мне увеличивать количество столбцов на странице без изменения ширины столбцов). Я хотел бы иметь возможность использовать em вместо пикселей, чтобы все выглядело правильно, если вы измените размер шрифта. Однако, если я использую следующее:

html {
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/
}

@media screen and (min-width: 42em) {
    div#page {
        width: 42em;
    }
}

Медиа-запрос сработает, когда минимальная ширина окна достигнет 42 * 16 пикселей, размер шрифта по умолчанию для моего браузера (Safari), а ширина страницы div # будет 42 * 12px, наследуя размер шрифта от элемента html. Я бы очень хотел, чтобы медиа-запросы запускались в зависимости от ширины текста, который я использую, есть ли способ заставить это работать?