Являются ли CSS @media заявления запроса каскадными свойствами, указанными в em unit?

Предполагая, что существует два CSS @media запросов, как показано в следующем примере:Являются ли CSS @media заявления запроса каскадными свойствами, указанными в em unit?

@media screen and (min-width:720px) {body{font-size: 2em;}} 
@media screen and (max-width:1280px) {body{font-size: 0.5em;}}

то, что можно было бы ожидать, если bodyfont-size просмотре страницы в устройстве с 1280 х 800 разрешение экрана (а именно: 2em, 0.5em или 1em)?

Для дополнительной ясности: в этом контексте «каскадирование» означает, что результат будет рассчитываться путем применения всех совпадающих случаев, то есть 2em * 0.5em.

По аналогии, имеющая CSS следующим образом:

TEST1<div style="font-size:2em">TEST2<div style="font-size:0.5em">TEST3</div></div>

font-size внутреннего TEST3 текста будет 1em (2em * 0.5em = 1em, то есть такой же, как оригинальный TEST1). Посмотреть на jsfiddle: https://jsfiddle.net/bj3xsanq/2/

источник

2015-10-11 Alex Bell

В вашем примере, размер шрифта будет в конечном итоге 0.5em, потому что второе font-size определение перекрывает первый в соответствии с обычными правилами CSS.

И если вы измените порядок двух медиа-запросов, то получившийся размер шрифта будет 2em.

Вот фрагмент, который демонстрирует это.

Обратите внимание, что текст будет полужирным (первый медиа-запрос), курсив (второй медиа-запрос) и красный (определение из второго медиа-запроса «выигрывает» в соответствии с обычными правилами CSS).

Размер шрифта будет установлен 0.5em, потому что второе определение перезаписывает первый (НЕ1em, как это было бы, если второе определение будет кумулятивно «сверху» на 1-ый).

@media screen and (max-width:10000px) { 
 
    p.styled { 
 
    color: blue; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    } 
 
} 
 

 
@media screen and (min-width:1px) { 
 
    p.styled { 
 
    color: red; 
 
    font-style: italic; 
 
    font-size: 0.5em; 
 
    } 
 
}

<p class="styled">Text with styles from both media queries applied.</p> 
 
<p>Text with no styles applied.</p>

источник

2015-10-11 20:08:02

Спасибо за сообщение. Я добавил некоторую ясность в определение, поэтому похоже, что последний запрос будет отменять все предыдущие совпадения, поэтому семантически это своего рода исключительная логика (только одна из многих). Просто чтобы убедиться, что каскадирование не произойдет, как 2em * 0.5em, заканчивается 1em, потому что оба случая соответствуют условию. –

Если оба запроса совпадают, последнее определение будет перезаписано первым. Он подчиняется обычным правилам CSS - вы можете думать о медиа-запросах, таких как «механизм рендеринга сохраняет все совпадающие запросы» и удаляет все несоответствующие, в виде _preprocessing step_ ». Я обновил ответ, чтобы продемонстрировать, что умножения не происходит. –

Еще раз спасибо. Я думаю, что это правильно для всех других свойств, но em unit означает мультипликатор, который должен использовать внутренний элемент для значения родительского элемента, поэтому в этом случае он, вероятно, должен быть 2em * 0.5em = 1em, как в примере на jsfiddle. –

Это будет 2EM до 1179px, если вы:

@media screen and (min-width : 280px){ 
body{font-size: 2em;} 
@media screen and (min-width : 1179px){ 
body{font-size: .5em;}}

Все зависит от того, как вы заявляете, точки разрыва, иногда странные вещи, кажется, случаются, но это просто все в декларации точек останова. Я нашел этот подход самым легким для мобильных устройств.

источник

2015-10-11 20:14:13

Спасибо, но это не то, о чем я просил. С наилучшими пожеланиями, –

Являются ли CSS @media заявления запроса каскадными свойствами, указанными в em unit?

ответ

Смежные вопросы