Dúvida sobre unidade de medida utilizada no width e height do menu hamburgue

Tenho uma dúvida.. No css, foi utilizado na classe cabecalho__menu-hamburguer o width e o height de 48 px. No entanto, eu sei que se eu colocasse a font-size(no html) de 62.5% e colocasse no width e heght da classe cabecalho__menu-hamburguer 4.8rem, alcançaria o mesmo resultado. Então, teria algum problema eu utilizar a unidade de medida relativa ao invés da fixa ?

Segue meu código: html{ font-size: 62.5%; }

.cabecalho{ background-color: var(--branco); display: flex; justify-content: space-between; }

.container{ display: flex; align-items: center; }

.cabecalho__menu-hamburguer{ width: 4.8rem; height: 4.8rem; background-image: url("/assets/Menu.svg"); background-repeat: no-repeat; background-position: center; display: inline-block; }

.container__imagem{ padding: 0.5rem; }

Não há nenhum problema em utilizar unidades de medida relativas, como porcentagem ou rem, em vez de unidades de medida fixas, como px, no CSS. Na verdade, o uso de unidades de medida relativas é muitas vezes recomendado, pois permite que o design se adapte a diferentes tamanhos de tela e configurações de fonte.

No seu código, você definiu a unidade de medida da fonte para 62.5% no HTML, o que equivale a 10px (62.5% de 16px, que é o tamanho de fonte padrão do navegador). Em seguida, você usou a unidade de medida rem na classe .cabecalho__menu-hamburguer, definindo o width e height como 4.8rem. Esses valores serão calculados com base no tamanho da fonte definido no elemento pai, que no caso é o html com a fonte de 10px. Portanto, 4.8rem será igual a 48px, alcançando o mesmo resultado que 48px.