Se você definir um tamanho de fonte padrão em seu CSS (16px, por exemplo), poderá utilizar as medidas em em mais lugares do que apenas os tamanhos de fonte. Verifique o código abaixo para obter um exemplo.
header { font-size: 1em; margin: 1.25em; padding: 0.625em; }Cada medida em utilizada nesta linha de CSS é baseada no tamanho da fonte do pai, ou no tamanho da fonte do id ou classe em si, se você tiver fornecido um. Dessa forma, ao passar para suas consultas de mídia, você pode simplesmente fazer referência ao tamanho da fonte do elemento e a margem e o preenchimento serão dimensionados de acordo. Essa também é uma boa prática ao levar em consideração o zoom do navegador. Quando o usuário aumenta o zoom, cada área do site é dimensionada de maneira mais suave.
Um exemplo de tamanho de fonte herdado pelos pais
body { font-size: 16px; }
header { /* font-size will be inherited by default */ margin: 1.25em; padding: 0.625em; }Apenas certifique-se de ter em mente que declarar um tamanho de fonte diferente no próprio elemento, ou o elemento pai alterará as outras medidas sendo usadas. (Se a qualquer momento você precisar consultar o tamanho padrão do nível raiz, você pode simplesmente usar rem (root-em) em vez de em.)
Para aumentar o tamanho da fonte e manter a mesma margem e preenchimento de um elemento, você simplesmente dividiria cada valor com base na mudança de tamanho do próprio tamanho da fonte, conforme postado abaixo:
header { font-size: 2em; margin: 0.625em; padding: 0.3125em; /* margin and padding divided by 2 */ }