CSS-EM Значения непоследовательны, как отлаживать/объяснять

Так что у меня проблема с последовательной оценкой значений «em», и я не могу понять, почему.CSS-EM Значения непоследовательны, как отлаживать/объяснять

Я использую SCSS для своего сайта и препровождаю все свои файлы SCSS в один файл CSS.

Позвольте мне проиллюстрировать, как моя структура настроена.

/* Value used for border width 
 
$defaultBorderWidth: $sizeSmallest; */ 
 

 
.test { 
 
\t width: 5em; 
 
\t height: 5em; 
 
\t 
 
\t border-style: solid; 
 
\t border-width: 0.15em; /* normally $defaultBorderWidth */ 
 
} 
 
.test div { 
 
\t width: 1em; 
 
\t height: 1em; 
 
\t 
 
\t border-style: solid; 
 
\t border-width: 0.15em; /* normally $defaultBorderWidth */ 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0"> 
 
</head> 
 
<body> 
 
    <div class="test"> 
 
    <div></div> 
 
    </div> 
 
</body> 
 
</html>

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

Моя проблема в том, что в некоторых моих виджетах есть экземпляры, где я получаю границу 3px вместо 2px.

Я читал, что моя ширина границы может быть каскадом с другим значением атрибута, но для меня жизнь не может понять, где и почему это происходит. Когда я смотрю на инструменты разработчика в своих браузерах, я вижу, что все экземпляры border-width равны 0.15em.

Если объяснение/отладка не может быть определена, я могу предоставить пример живого сайта, ожидая, что он будет исправлен на реальном сайте (FYI для будущих зрителей этой статьи).

источник

2016-06-10 Josh Balsillie

Итак, мы знаем ваш вопрос, каков ваш вопрос? –

'ems' относятся к размеру шрифта, не имеет значения, что у вас есть' 0.15em' во всех границах, если вы измените размер шрифта на любой элемент, тогда '0.15em' больше не будет' 2px', – blonfu

blonfu , Я думаю, это может быть моей проблемой. Можете ли вы рассказать о том, как ems меняются? Например, я сделал тест, чтобы проверить, что вы говорили с моим шрифтом «h1», который является 3em. Я заметил гораздо большую границу, когда к ней применяется граница 0.15em, так вы говорите, что это 0.15 из 3em ... i.e 0.45em border? –

since095 предоставил ответ на использование rem в отличие от em. Где rem всегда использует размер шрифта root по умолчанию для тега <html> (который вы можете переопределить), в отличие от этого em использует текущий размер шрифта тега и соответственно корректирует другие значения em (хорошо для наследования).

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

Я столкнулся с теми, которые предлагают комбинацию из двух, используя rem для установки констант, таких как размер шрифта, границы и em для интервалов, таких как поля и отступы.

Ниже приведен пример использования использования rem и em.

.testRem h1 { 
 
\t border-style: solid; 
 
\t 
 
\t font-size: 3rem; 
 
\t width: 15rem; 
 
\t height: 3rem; 
 
\t margin: 0.5rem; 
 
\t border-width: 0.5rem; 
 
} 
 
.testEm h1 { 
 
\t border-style: solid; 
 
\t 
 
\t font-size: 3em; 
 
\t width: 5em; 
 
\t height: 3em; 
 
\t margin: 0.5em; 
 
\t border-width: 0.5em; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div class="testRem"> 
 
    <h1>Test rem</h1> 
 
    <div class="testEm"> 
 
    <h1>Test em</h1> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-06-11 16:22:15

CSS-EM Значения непоследовательны, как отлаживать/объяснять

ответ

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