Duvida no width

Olá, tudo bem ? As unidades citadas possuem utilização bem parecidas, porém com utilidades bastante distintas. vw, vh, vmin, vmax Além do vm, existem essas outras unidades, o mais importante que deve saber sobre elas é sua compatibilidade, que não é a das melhores, porém já estão ganhando um espaço considerável. O vw estabelece uma relação de porcentagem com a Viewport Width, já o vh bem intuitivamente refere-se a Viewport Height. Além de serem usadas para elementos "quadriláteros" (imgs, divs, etc), podem também ser aplicadas também em textos, para o font-size. Com isso você consegue que a fonte se adeque dinamicamente ao tamanho do janela Já o vmin e vmax estão relacionados com o valor mínimo ou máximo das larguras e alturas, dependendo de qual é o menor e o maior. Por exemplo, se o navegador possui uma largura de 1000px e uma altura de 800px, 1vmin seria 8px e 1vmax seria 10px. Mas se ele foi redimensionado para 800px de largura e altura de 1000px, apesar de terem se invertido largura e altura, o vmin e vmax continuam os mesmos. em, rem A unidade em como já é sabido por muitos é utilizada, em sua grande maioria, para textos. Uma situação para o em: você deu ao html e ao body um font-size: 20px (este de padrão possui 16px), então todos elementos filhos, consequentemente, terão 20px. Contudo, você também atribuiu a um

um font-size: 1.4em. O que isso quer dizer? Quer dizer que esse p possui um tamanho de fonte igual a 1.4 vezes o fontSize que herdou de seu elemento pai que, no caso, foi o body, ou seja, 1.4 * 20px = 28px. Situação para o rem: se imagine dentro da situação anterior... O parágrafo que possuía um font-size: 1.4em (28px), agora foi inserido numa div com um font-size: 30px. O cálculo atual deverá ser 1.4 * 30 = 48 (30px do elemento pai). Mas se eu quiser que ele herde do elemento-raiz? Como este no caso é o html(podendo também se o body) (com font-size: 20px), basta eu dar ao parágrafo um font-size de, ao invés de 1.4em, o 1.4rem com o rem. O cálculo voltará a herdar do body (elemento-raiz). Porcentagem % Não há muito o que falar da porcentagem, esta leva em consideração o elemento pai, e vai também variar de acordo com algumas propriedade css, como o position. Assim como o vw a porcentagem também pode ser aplicada em textos. Por exemplo, caso o elemento pai de um

tenha um font-size: 40px, e essep tenha um font-size: 200%, o tamanho da fonte deste terá o dobro do tamanho da fonte do elemento pai, no caso, 80px.

Tem esse link do DWP que tambem tem uma otima explicação com exemplos praticos. https://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/

Espero que tenha ajudado.