почему размер шрифта 62,5% для тега body не работает?

Я пытаюсь реализовать размер шрифта: 62,5% для тега body:

body {
    font-size: 62.5%;
}

У меня он есть в файле _reset.scss, но по какой-то причине он не работает. У меня есть два скриншота из Chrome DevTools.

Вот ссылка GitHub для моего проекта: https://github.com/MajesticBay/nearballard_v2

Вот ссылка на живую версию: https://nearballardv2.netlify.app/

введите здесь описание изображения введите здесь описание изображения


html css sass
person in43sh    schedule 12.01.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Пожалуйста, проверьте свой код. В _reset.scss вы вызвали тег body в двух местах и ​​вызвали одну и ту же функцию размера шрифта в двух местах с двумя размерами.

body {
    //1rem = 10px 10px/16px = 62.5%
    font-size: 62.5%;
    //will increase or reduce the font-size based on the screen size in the future
}

Вы назвали это здесь с размером шрифта и

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Вы также назвали это здесь.

Попробуй исправить, если все равно ошибка. Попробуем найти другого.

person Rockzy    schedule 12.01.2021
comment
Пожалуйста, не забудьте проголосовать за мою репутацию - person Rockzy; 12.01.2021
comment
Я видел это раньше, но это не так. Я прокомментировал это, но это все еще не работает. - person in43sh; 12.01.2021
comment
Вышеуказанная ссылка является вашим сайтом? Если да, то я не думаю, что есть проблема. Я посетил его, и это прекрасно - person Rockzy; 12.01.2021
comment
да, это ссылка. это 32px, но это должно быть 20px. - person in43sh; 13.01.2021
comment
хорошо, дай мне посмотреть... - person Rockzy; 14.01.2021

arrow_upward
1
arrow_downward

Я повторно наблюдал за вашим кодом, чтобы получить правильный шрифт. Вы хотите изменить размер шрифта с 32 пикселей на 20 пикселей, верно?.. Хорошо, вот что нужно сделать. Вы можете выбрать класс элемента в таблице стилей. В данном случае он находится в component.css. Там измените размер шрифта основного заголовка с 2rem на 1,25rem. Это изменит размер «Местоположения» с 32 пикселей на 20 пикселей.

Измените размер шрифта с этого

.heading-primary {
    font-family: "Monument Extended";
    font-size: 2rem;
    line-height: 150%;
    color: var(--color-secondary);
}

к этому

.heading-primary {
    font-family: "Monument Extended";
    font-size: 1.25rem;
    line-height: 150%;
    color: var(--color-secondary);
}

Размер изменен

Если это не ваша проблема... не стесняйтесь сказать

person Rockzy    schedule 14.01.2021
comment
Спасибо, @Rockzy, что уделили мне время, я очень это ценю. Я согласен, что это решение, просто я пытаюсь реализовать технику, которую использовал раньше. Вот вопрос о stackoverflow: stackoverflow.com/questions/28988445/. А вот пример сайта, на котором я это реализовал, но никак не могу понять, что я сделал по-другому на этот раз: github.com/awesome-store/front-end - person in43sh; 14.01.2021