Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Porque Usar 'Em' No Seu CSS Hoje em Dia?

    Enviado por

    Maria Fernanda
    52 visualizações1 página
    O documento discute o uso de medidas em em CSS. Explica que em é uma medida relativa calculada em relação ao tamanho da fonte do elemento pai, ao contrário de px que é fixo. Também discute quando fazer sentido usar em, como em designs responsivos para que elementos mudem de tamanho de forma proporcional ao redimensionar a tela.

    Descrição original:

    Título original

    Porque usar 'em' no seu CSS hoje em dia?

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    O documento discute o uso de medidas em em CSS. Explica que em é uma medida relativa calculada em relação ao tamanho da fonte do elemento pai, ao contrário de px que é fixo. Também discute quando fazer sentido usar em, como em designs responsivos para que elementos mudem de tamanho de forma proporcional ao redimensionar a tela.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    52 visualizações1 página

    Porque Usar 'Em' No Seu CSS Hoje em Dia?

    Enviado por

    Maria Fernanda
    O documento discute o uso de medidas em em CSS. Explica que em é uma medida relativa calculada em relação ao tamanho da fonte do elemento pai, ao contrário de px que é fixo. Também discute quando fazer sentido usar em, como em designs responsivos para que elementos mudem de tamanho de forma proporcional ao redimensionar a tela.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 1

    ENTRAR MATRICULE+SE

    TODOS OS NOSSAS PARA DEV


    CURSOS FORMAÇÕES EMPRESAS EM 5T6

    Artigos > Front-end

    Porque usar 'em' no seu


    CSS hoje em dia?
    Porque usar 'em' no seu CSS hoje em dia?

    COMPARTILHE
    slopes
    30/09/2014

    Talvez você programe pra Web há muitos anos


    como eu e tenha ouvido falar como em é
    melhor que pixel. Mais flexível. Mais
    acessibilidade. Será?

    Como os ems
    funcionam?
    A grande diferença de em e px é que em é
    uma medida relativa. O valor é calculado
    levando sempre em consideração o font-size
    do pai. Isso quer dizer que um elemento com
    font-size: 2em; vai ter o dobro do tamanho da

    fonte do pai, seja ele qual for.

    E assim por diante. O pai do pai do pai do pai...


    É uma grande multiplicação de valores até
    chegar na raiz do documento, o <html> . Se não
    tiver uma fonte definida, a maioria dos
    navegadores usa 16px como padrão para o
    <html> .

    Isso quer dizer que esse código:

    <html> <body> <main style="font-size:

    ..acaba sendo equivalente a:

    <html style="font-size: 16px"> <body

    Mito: em não é mais


    acessível
    A recomendação de que em é melhor para
    acessibilidade vem da época dos IEs velhos, 6,
    5.5. Nesses navegadores, quando o usuário
    tinha dificuldade de visão, podia aumentar a
    fonte. Na prática, a fonte base do <html> era
    aumentada. Ou seja, usava 16px por padrão
    mas com o zoom isso virava 20px por
    exemplo.

    Assim, todos os elementos que estavam com


    em tinham seu valor recalculado e a página
    aumentava de tamanho. Era uma espécie de
    zoom, essencial para acessibilidade. Os
    elementos que estavam com px , porém, não
    aumentavam de tamanho. Péssima
    acessibilidade. E assim nasceu o modismo do
    em .

    Mas todos os navegadores modernos, IE


    inclusive, não tratam mais o zoom assim. Na
    Web moderna, o conceito de pixel é relatevo
    também. Escrever 1px no CSS não significa
    necessariamente um pixel físico na tela.
    Quando o usuário dá um zoom de 200% por
    exemplo hoje em dia o navegador aumenta
    todas as medidas, inclusive o pixel. Isso quer
    dizer que 1px no CSS vai ser desenhado com
    o dobro de pixels físicos ( 2px x 2px numa tela
    comum).

    Ou seja, não precisamos de em para


    acessibilidade.

    Onde o em faz
    sentido então?
    A grande vantagem do em é porém no seu
    aspecto de multiplicar os valores de acordo
    com os pais. Isso quer dizer que você pode
    mudar o font-size de um elemento e isso
    afetar todos os seus filhos. É muito útil para
    criar seções na página onde os elementos
    devem aumentar proporcionalmente entre si -
    um componente, um widget.

    Ou seja, usamos em para facilitar a escrita do


    nosso CSS. E por isso é bom dominar o uso de
    em e saber aproveitá-lo no seu código.

    O em , claro, não é para todos os cenários. Ele


    vincula as medidas do filho com o font-size do
    pai. Você mexe no pai e o filho é afetado. Isso
    às vezes é indesejado. Só usamos em quando
    existe uma relação estrutural entre o filho e o
    pai e queremos que um afete o outro. Onde
    não fizer sentido, continue usando px .

    O caso famoso dos


    designs responsivos
    O em teve uma volta triunfante nos designs
    responsivos. É que é muito frequente você
    querer uma fonte menor no mobile, que tem
    menos espaço visível, mas uma fonte maior no
    Desktop, mais espaçoso. E você quer que a
    página toda aumente proporcionalmente. Por
    isso o em .

    Fazemos algo assim:

    @media (min-width: 500px) { html { fon

    Conforme o tamanho da tela aumenta,


    aumentamos o valor do em base na tag
    <html> . Isso causa um efeito cascata em todos

    os elementos filhos se estiverem escritos com


    em .

    É muito bom usar em nos sites responsivos


    para ajustar, via CSS, o tamanho de todos os
    elementos proporcionalmente.

    Mas em não é uma medida flexível nem mais


    acessível. Pelo menos não no sentido de
    outras como a porcentagem, que se adapta
    automaticamente. O em é fixo, só o valor que
    é calculado a partir de uma conta mais
    complicada.

    Bônus: o rem e outras


    medidas
    verdadeiramente
    flexíveis
    O rem é uma medida nova parecida. A
    diferença é que a conta não leva em
    consideração todos os pais, mas apenas a
    raiz, o <html> . Isso quer dizer que mexer no
    font-size de algum elemento na página não vai

    refletir e atrapalhar outros. Só se mexermos


    no <html> mesmo. É útil para o caso do design
    responsivo que vimos antes.

    Mas lembre que o em multiplicar pelo font-size


    do pai é uma coisa boa em muitas situações.
    Várias partes da página podem ser encaradas
    como pequenos componentes autocontidos. E
    mexer no pai do componente tem que afetar
    todos os filhos. O em é excelente pra isso, ao
    contrário do rem .

    E, se você quiser uma medida


    verdadeiramente flexível e adaptável para
    fontes, a resposta está nas novas viewport
    units. Em especial, um código como html {
    font-size: 2vw; } vai fazer a fonte se adaptar

    automaticamente a todo tipo de resolução.


    Mas isso fica para outro artigo.

    Se quiser saber mais sobre medidas flexíveis,


    boas práticas de CSS e também de design
    responsivo, não perca o curso de Web da
    Caelum.

    E você, gosta de usar em?

    Artigo Anterior Próximo Artigo

    Como anda o Validações


    Angular.js? Devo customizadas no
    embarcar nessa? Asp.Net MVC

    Veja outros artigos sobre


    Front-end

    Quer mergulhar em
    tecnologia e aprendizagem?

    Receba a newsletter que o nosso CEO


    escreve pessoalmente, com insights do
    mercado de trabalho, ciência e
    desenvolvimento de software

    Escreva seu email

    ME INSCREVA

    Nossas redes e apps

    Institucional

    Sobre nós

    Trabalhe conosco

    Para Empresas

    Para Escolas

    Política de Privacidade

    Compromisso de Integridade

    Termos de Uso

    Status

    A Alura

    Como Funciona

    Todos os cursos

    Depoimentos

    Instrutores(as)

    Dev em ATB

    Conteúdos

    Alura Cases

    Imersões

    Artigos

    Podcasts

    Artigos de educação

    corporativa

    Fale Conosco

    Email e telefone

    Perguntas frequentes

    Novidades e Lançamentos

    mariaquinyas@gmail.com ENVIAR

    CURSOS

    Cursos de Programação
    Lógica | Python | PHP | Java | .NET |
    Node JS | C | Computação | Jogos | IoT

    Cursos de Front-end
    HTML, CSS | React | Angular | JavaScript |
    jQuery

    Cursos de Data Science


    Ciência de dados | BI |
    SQL e Banco de Dados | Excel |
    Machine Learning | NoSQL | Estatística

    Cursos de DevOps
    AWS | Azure | Docker | Segurança | IaC |
    Linux

    Cursos de UX & Design


    Usabilidade e UX | Vídeo e Motion | 3D

    Cursos de Mobile
    React Native | Flutter | iOS e Swift |
    Android, Kotlin | Jogos

    Cursos de Inovação & Gestão


    Métodos Ágeis | Softskills |
    Liderança e Gestão | Startups | Vendas

    Você também pode gostar