разница между em-calc и rem-calc

Я использовал em-calc для определения размера CSS в моих проектах Zurb Foundation. Однако недавно я заметил, что разработчики все чаще используют rem-calc.разница между em-calc и rem-calc

Я знаю, что делает каждая функция, но я действительно не понимаю, когда я должен использовать em-calc или rem-calc.

В чем разница между этими двумя функциями?

источник

2015-04-17 Aljaz

Похоже, они в основном пытаются сделать то же самое, что они сделали с 'em' единиц, но с' rem' вместо ныне. Посмотрите, почему вы, возможно, захотите использовать 'REM' над' EM', и, возможно, это поможет прояснить ситуацию. https://j.eremy.net/confused-about-rem-and-em/ –

Ну на самом деле ваш вопрос является своего рода дубликат How does rem differ from em in CSS? (и Practical difference between rem and em units) и так далее

em-calc() возвращает значение эм вашего входа в пикселях, в то время как rem-calc() возвращает бэр единиц. На практике это означает, что при использовании rem-calc() для установки размера шрифта селектора размер шрифта зависит от размера шрифта атрибута html вместо его прямого родителя.

Вы можете увидеть diffence в следующем примере:

HTML

<body> 
<section> section text 
    <small>small text</small> 
</section> 

<section class="rem"> section .rem text 
    <small>small text</small> 
</section> 
</body>

SCCS

section { 
font-size: em-calc(24); 
small { font-size: em-calc(12); } 
} 

section.rem { 
font-size: rem-calc(24); 
small { font-size: rem-calc(12); } 
}

Результат выше будет выглядеть, как показано в изображение ниже:

enter image description here

Теперь измените размер шрифта section тегов:

section { 
font-size: em-calc(48); 
small { font-size: em-calc(12); } 
} 

section.rem { 
font-size: rem-calc(48); 
small { font-size: rem-calc(12); } 
}

Обратите внимание, что из-за обоих section тегов являются прямыми родителями body с использованием rem-calc(48) или rem-calc(48) для шрифта размера section в вышеупомянутое не имеет никакого значения для этого примера.

Теперь результат будет выглядеть следующим образом: enter image description here

Как вы можете видеть, размер шрифта для малого и не масштабируется с его родителем.

Лично я думаю, вы должны использовать rem-calc() для элементов основной структуры вашей страницы (заголовок, нижний колонтитул, контент, навигация и т. Д.) И em-calc() для элемента, вложенного в предыдущие основные элементы.

Так для примера используем здесь:

section { 
font-size: rem-calc(20); 
small { font-size: em-calc(10); } 
}

источник

2015-05-02 14:08:28

разница между em-calc и rem-calc

ответ

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