[Dúvida] REM não esta funcionando?

Oii Guilherme, tudo bem?

Pelo que você compartilhou, não consegui identificar uma questão específica com o uso de REM no seu código. O REM é uma unidade de medida relativa que se baseia no tamanho da fonte do elemento raiz do documento. No seu caso, você não definiu explicitamente um tamanho de fonte para o elemento raiz (:root ou html), então o navegador usará seu tamanho de fonte padrão, que geralmente é 16px.

Por exemplo, se você definir font-size: 2.12rem; como fez para a classe .cabecalho__menu__link, isso será calculado como 2.12 * 16px = 33.92px.

Se o REM não estiver funcionando como esperado, sugiro que você verifique se o tamanho da fonte está sendo alterado quando você muda as configurações de tamanho de fonte do seu navegador. Se o tamanho da fonte permanecer o mesmo, pode ser que alguma outra regra CSS esteja sobrescrevendo suas definições de REM.

Também seria útil se você pudesse compartilhar mais detalhes sobre o problema que está enfrentando, como o seu HTML completo e mostrar como você queria que ficasse e como está ficando, quanto mais detalhes, melhor para te ajudar.

Deixo aqui o código completo da aula 1:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
    --cor-hover: #272727;

    --fonte-primaria: 'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
}
*{
    margin: 0;
    padding: 0;
}

body{
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}
.cabecalho{
    padding: 2% 0% 0% 15%;
}
.cabecalho__menu{
    display: flex;
    gap: 80px;
}
.cabecalho__menu__link{
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}
.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo{
    font-size: 2.25rem;
    font-family: var(--fonte-primaria);
}
.titulo-destaque{
    color: var(--cor-terciaria);
}
.apresentacao__conteudo__texto{
    font-size: 1.5rem;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.apresentacao__links__subtitulo{
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.5rem;
}
.apresentacao__links__link{
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}
.apresentacao__links__link:hover{
    background-color: var(--cor-hover);
}
.rodape{
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5rem;
    font-weight: 400;
}

Um abraço e bons estudos.

Boa noite! Esse problema do rem esta afetando mais lugares no código estava tentado fazer a transição de web par mobile, também não deu muito certo.

Oi Guilherme, por favor coloque o código do seu projeto completo no GitHub, que assim consigo te ajudar melhor.

Ok ‎ ‎ ‎ ‎

Boa noite, Lorena consegui colocar o projeto no GitHub, repositório https://github.com/Marquesgui22/GUI-Dev fico no aguardo sobre uma resposta?

Olá! Obrigada por compartilhar, como o seu projeto está diferente da aula, realmente terá essas diferenças.

No seu repositório, você tem dois style.css, um está fora da pasta, se você não for usá-lo, indico deletar para que você não se confunda.

No seu HTML, fechei a tag head que estava aberta e formatei o documento para a indentação correta. No Css ajustei algumas formatações e adicionei a class da imagem que não tinha e dei um tamanho de 70% pra ela. E adicionei uma margin-right nos links para adicionar um espaço entre a imagem e os links.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Massoterapia Luana Marques</title>
    <link rel="stylesheet" href="./style/style.css">
</head>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital@0;1&display=swap');

:root {
    --cor-primaria: #290001;
    --cor-secundaria: #87431D;
    --cor-terciaria: #C87941;
    --cor-hover: #DBCBBD;

    --fonte-primaria: 'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    /* height: 100vh;*/
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.cabecalho {
    padding: 5% 0% 0% 15%;
}

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link {
    font-family: var(--fonte-principal);
    font-size: 34px;
    font-weight: 600;
    color: var(--cor-terciaria);
    text-decoration: none;
}

.apresentacao {
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao_conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao_conteudo_titulo {
    font-size: 36px;
    font-family: var(--fonte-secundaria);
}

.titulo-destaque {

    color: var(--cor-terciaria)
}

.apresentacao_conteudo_texto {
    font-size: 24px;
    font-family: var(--fonte-principal);
}

.apresentacao__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    justify-content: space-between;
}

.apresentacao__links__subtitulo {
    font-family: var(--fonte-secundaria);
    font-weight: 400;
    font-size: 24px;
}

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    border: solid 5px;
    width: 480px;
    text-align: center;
    border-radius: 8px;
    font-size: 34px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    margin-right: 30px;
}

.apresentacao__links__link:hover {
    background-color: var(--cor-hover);
    padding: 3%;
    border: 2px solid var(--cor-terciaria);
}

.apresentacao__imagem {
    width: 70%;
}

.rodape {
    color: var(--cor-secundaria);
    background-color: var(--cor-terciaria);
    padding: 24px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 30px;
    font-weight: 400;
}

Resultado:

Um abraço.

Estava correto na parte do adicionar a fonte ? obrigado pela atencão.

Oi, só esqueci de avisar que tinha ajustado uma letrinha em Krona, antes estava Krone.

Por nada!

Bons estudos.