Entenda de uma vez os TAMANHOS DE MEDIDA do ELEMENTOR

Olá Marcelo Rocha designer falando aqui é um prazer estar com você em mais um vídeo e hoje nós vamos falar um pouco sobre tamanhos de fontes ou melhor tamanhos usados no elemento não só Fontes né Mas qualquer outra medida usada dentro do CSS no elemento tá Convido você a se inscrever no meu canal ativar o Sininho para receber notificações e novos conteúdos que eu estou postando e se você é uma pessoa que quer trabalhar com design e ganhar bem com isso então você tem que fazer parte da nossa comunidade tem que estar aqui conosco tá

bom Sem Mais enrolação Então vamos lá para a tela do meu computador Olha só eu estou aqui com o documento que eu preparei e eu vou te explicar que que é cada uma dessas medidas aqui dentro do elemento a primeira delas é mais simples é o Pixel né bom antes de falar sobre as medidas você precisa entender duas coisas existem dois tipos de medidas os tamanhos fixos e os tamanhos relativos tá fixos e relativos ou variáveis tamanho fixo aquele que é aquele valor x ele não muda agora um tamanho variável ele muda dependendo de uma

determinadas circunstância a primeira medida que é o Pixel é um tamanho fixo ou o Pixel é um tamanho fixo e ele é de acordo quer ver ó é cada quadradinho da tela do computador vamos dizer assim né então se você for chegar bem bem pertinho da tela do seu computador você vai perceber que a tela é composta de vários quadradinhos muitos muitos muito quadradinhos cada um desses quadradinhos ele é um pixel então a medida PX que de pixel dentro do elemento ela é isso e ela é fixa ali por exemplo aqui eu estou com uma

fonte que eu coloquei né peguei um título de joguei aqui e quando eu venho aqui no estilo na tipografia e eu coloco a medida como PX eu vou até dar um zoom para você ver melhor Coloca essa medida como PX de 35 pixels ela fica fixa em 35 pixels tá aqui tá maior mais óbvio que é porque eu dei um né enfim a medida exata dos pixels essa aqui né mas então vou trabalhar sem resumo para você não dizer que eu tô confundindo você vamos lá aqui ó 35 pixels por exemplo eu posso colocar 50

pixels é fixo está maior Independente de qual é o tamanho da tela que eu estou ó esse é um tamanho fixo só entendeu não muda ele é o mesmo tamanho em todas as resoluções certo que é o Pixel cada um desses quadradinhos certo agora então vamos para a próxima medida a próxima medida é m essa medida é um tamanho variável e ela depende do elemento Como assim por exemplo Imagine que o elemento pai dela ou seja o elemento que quando a gente fala sobre programação a gente usa o conceito de encapsulamento o que que é

encapsulamento por exemplo nós estamos aqui com container dentro desse contêiner tem um objeto de título então o container é o objeto pai do título o título que está dentro do container como se fosse o filho dele entendeu ele está encapsulado como se tivesse vamos dizer assim o ovo de Páscoa dentro do outro que tá dentro do outro que tá dentro de outro esse é o conceito de encapsulamento né que é um objeto filho um objeto pai aí poderia até seguir né objeto Avon objeto tataravô e assim por diante né mas o a medida de m

Ela depende do objeto pai por exemplo se o objeto pai tem 10 pixels Então ela é relativa um é m é 10 pixels dois m é 20 pixels ele multiplica o m pela pelo tamanho do objeto pai e aqui tem alguns exemplos né Por exemplo esse objeto pai tiver 25 Picos então 1 m é 25 pixels seu objeto pai tem 25 pixels 2m São 50 pixels para você entender melhor esse assunto vamos fazer o seguinte ó vamos voltar aqui no nosso elemento e aqui eu vou deixar esse objeto olha deixa eu pensar um valor aqui

vamos colocar 10 pixels muito pequeno né Vamos colocar então 25 ó 25 pixels tá 25 pixels agora eu vou criar um outro objeto aqui através de programação dentro dele e eu vou definir um tamanho com m eu vou dar um código BR para pular linha mas se ela é design eu vou escrever de novo Marcelo só que dentro desse objeto de baixo aqui ó deixa eu dar um zoom para você enxergar melhor aqui eu vou colocar um código que vai ser o seguinte span Style fonte size 1 e m eu vou fechar o Então significa

o quê que esse objeto de baixo deixa eu deixar assim para ficar melhor para a gente ver né então tô dizendo aqui que esse objeto de baixo ele tem o tamanho de um M então perceba que como ele tem o tamanho de um M que é o objeto pai que aqui esse título que ele tá ele tá dentro desse objeto de título Então ele continua com o mesmo tamanho que é de 25 pixels percebe que os dois estão iguaizinhos ou seja os dois estão com 25 pixels Agora sim em vez de um M eu coloco

dois M aqui ó Então esse objeto ele já partiu para 50 pixels por quê Porque ele pegou objeto pai que é esse primeiro título aqui de 25 pixels e ele multiplicou por dois que é 2m Se eu colocar 3M ele vai multiplicar esse valor por 3 Se eu colocar quatro ele vai multiplicar esse valor por 4 e assim por diante e esse valor ele depende do tamanho que tá o objeto pai por exemplo aqui agora nós estamos com 25 pixels mas se fosse 10 pixels ó perceba que ele diminui relativamente de forma proporcional 15 20

35 entendeu ele depende do objeto pai por isso que ele é dessa forma aqui ó e para você ter certeza que isso é verdade eu vou fazer o seguinte ó eu deixei ele com fonte sai 2m ou seja aqui eu tô trabalhando com 20 pixels e esse objeto aqui tem dois m ou seja tem que ter 20 pixels vezes 2 que é o total de 40 pixels de matemática e para você ter certeza disso eu vou fazer o seguinte eu vou colocar um outro objeto aqui de título vou escrever a mesma coisa Marcelo R designer

ou centralizar vou também colocar a cor branca e eu vou deixar esse objeto aqui com 40 pixels tá no bold Olha só perceba ele ficou exatamente a mesma coisa que o de cima porque porque é justamente que nós acabamos de explicar tá bom próxima medida Então esse é o m agora o r e m por que tem o r o r significa Roots ou o principal então ele é ele é um tamanho variável também só que ele não depende do objeto pai ele depende do objeto Bari ou seja da definição do tamanho de letra na

configuração do site O que que é objeto Bari objeto bare assim dito de forma muito simples é todo o conteúdo do site então num determinado campo de configuração é porque na realidade é que a gente tem dentro de forma visual mas por trás disso aqui é código né se a gente quiser vir fazendo a linha de código a gente fazia mas não é necessário porque o próprio elemento ele permite que você de forma visual Mas você querendo ou não por trás dele tá rolando um código ali entendeu só que a gente nem mexe com isso

mas o ponto é o seguinte esse essa medida aqui o RM ele varia de acordo com o tamanho que está definido como fonte o tamanho principal da fonte padrão definido no site definido no objeto pare para você entender melhor isso Ó eu vou pegar essa fonte aqui eu vou pagar esse eu não vou melhor vou fazer com essa de baixo vou até pintar ela de amarelo para a gente não confundir para ficar mais fácil né penteado e amarelo e aí aqui na medida vou colocar RM e RM vou colocar um então um normalmente 16 pixels

tá não significa que é sempre 16 pixels mas por padrão quando a gente não configura ele é 16 pixels então aqui o objeto está com 16 pixels porque é um r e ele é bem parecido com m só que ele varia de acordo com o root que é o a medida principal do site dois ele vai dar 36 pixels 3 ele vai dar quanto dá 16 x 3 16 é 32 Depois tenta dar 48 Então esse aqui tem 48 pixels tá e assim por diante entendeu próximas medidas essa daqui são muito interessantes né o VH

e o VW ver o porte Raid e viewport o que significa o Rage significa altura em inglês e viewports é o de acordo com a visualização do dispositivo então se eu clicar nela aqui ó ela é um tamanho variável também é um tamanho relativo não um tamanho fixo e ele varia dependendo do que da altura do objeto de navegação sempre é um por cento da altura por exemplo uma altura de 500 pixels é um por cento Quanto que é 1% de 500 pixels 5 pixels 2%, 10 pixels 5% 25 pixels 10,52,5 pixels para que você

consiga entender um pouco melhor isso aqui a gente não consegue ver tanto na fonte eu vou fazer aqui nessa nessa nesse container para você entender tá vou tirar esse pé lindo aqui e vamos vir aqui ó na altura do bicho vamos vir aqui ó altura mínima então eu vou colocar a altura de VH VH que é relativo eu vou colocar aqui por exemplo 50 então ele tá fazendo uma altura de 50% de acordo com o tamanho do meu dispositivo entendeu na verdade de acordo com o tamanho da minha janela perceba que é de acordo com

o tamanho da janela eu diminua a janela essa medida também diminui entendeu Então essa é uma medida relativa de acordo com a navegação não necessariamente dispositivo mas a navegação se o meu navegador Ele está com uma altura de 500 pixels Então esse objeto aqui ele vai ter 250 pixels que é 50% e assim por diante entendeu tanto é que quando eu quero que ele ocupe até ela inteira eu coloco 100 porque ele vai pegar 100% ó tá vendo pegou 100% da tela ou melhor da altura de navegação entendeu que é o no navegador certo então

isso é para VH agora eu vou deixar que fixo de 500 Pixel só para mim te mostrar uma coisinha vou deixar também alinhado no centro agora o VW VW ele é a mesma coisa só que para as laterais para largura em vez de altura tá widget que é o VW significa largura em inglês e tamanho variável ele vai variado de acordo com a largura e ele depende exatamente da largura navegação e é sempre 1% de largura da tela por exemplo tem uma tela com largura de 1920 pixels Quanto que é 1% de 1920 19,2% 38,4

5% 96 10% ou melhor é 10,5 né 10,51,6 Quer ver como que isso ele funciona como ele é algo relativo vamos fazer o seguinte agora vamos pegar essa fonte aqui esse texto esse título né em vez de Rain vamos deixar VW então um VW é que acho que tem um tamanho mínimo né Mas vamos deixar aqui dois por exemplo então se eu tenho uma largura aqui ou melhor é um mesmo né então a minha largura 1920 por exemplo ele pega um por cento Quanto que é 1% mesmo 19,2 Então essa fonte está com tamanho 19,2

pixels para você ver como isso aqui realmente é assim ó se eu mudar os tamanhos dos dispositivos aqui ó ele vai variar o tamanho da minha fonte percebe que no celular a largura diminuiu tá vendo ele é relativo a largura do dispositivo e ele é 1% o VW Você pode trocar porcentagem que vai ser a mesma forma de entender então se eu quero que ele fique 10%, então ele pegou a minha largura que tem tem 1920 dividido tô citando um exemplo tá 1920 dividiu por 100 e multiplicou por 10 para pegar os 10%. ou seja

deu 1920 1992 então aqui eu tô com uma fonte de 192 pixels entendeu se eu colocar 5 ele vai diminuir e é isso aqui como eu falei ele varia de acordo com o tamanho do dispositivo entendeu alguns dispositivos mais largos ele vai ficar maior alguns dispositivos menores ele vai ficar menor isso é variável de acordo com o tamanho do dispositivo tá bom Então essas são as medidas básicas que nós trabalhamos no elemento E claro também a porcentagem né a porcentagem não precisa nem explicar porcentagem também é uma medida relativa e ela varia de acordo com

a porcentagem 100% da tela 50% da tela que é metade 25% que é um quarto e assim por diante espero que esse conteúdo tenha ajudado você tenha se ou melhor tenha sido útil para você tem te ajudado de alguma forma Tá bom se você gostou não esquece de deixar o seu like se inscrever no canal e eu quero te fazer um convite especial dia 3 de novembro às 19:30 ao vivo aqui no meu canal no YouTube eu vou fazer uma Master Class uma super aula onde eu vou mostrar como eu consegui sair de um faturamento

de menos r$ 600 por mês a mais de 10 mil reais todos os meses só com criação de sites eu vou te revelar o mercado ou melhor de onde eu consigo os clientes específicos que pagam os valores altos pelo meu trabalho de criação de sites a concorrência é muito pequena e como que você também pode conseguir clientes nesse ramo Como que você pode precificar seus trabalhos enfim eu vou fazer uma super aula eu tenho certeza que vale muito a pena você assistir vai ser um divisor de águas na sua carreira tá para você se inscrever

nessa aula é só clicar no primeiro link que está na descrição do vídeo beleza te espero lá então é isso aí fui e tamo junto até a próxima [Música] [Música]