Aprenda MEDIA QUERIES no CSS em 10 MINUTOS

Fala galera sejam muito bem-vindos a mais um vídeo aqui do canal dicas para deves o canal que traz para você programação Sem enrolação Eu sou Felipe e hoje eu vou ensinar para você CSS Mídia curios Sem enrolação então media Chris são é um tópico essencial para você que quer criar sites responsivos sites que realmente funcionam bem em todos os tipos de dispositivos seja ele mobile né celular seja tablet seja notebook desktop enfim para o seu site você realmente responsivo você precisa saber como usar mediacris e hoje eu vou ensinar isso para você beleza então já

abri o arquivo HTML aqui no meu vs code já coloquei algum conteúdo aqui e também já importei o arquivo CSS aqui beleza a gente vai brincar com esse cara durante a aula de hoje e uma coisa bem importante galera que a gente precisa colocar no HTML que é meio padrão mas eu quero explicar para você quando a gente quer fazer sites responsivos a gente precisa colocar esse meta name aqui com viewport e citar a wi-fi para ser o device wi-fi então o que que esse cara faz ele realmente fala assim para o documento HTML cara

eu quero que você ocupe toda a largura do dispositivo é meio assim redundante né meio óbvio que a gente quer que isso aconteça mas para a gente garantir que esse comportamento vai ser obedecido a gente precisa aceitar essa meta aqui então já sentei Eu criei esse template com o emitido vs code então apertei exclamação apertar ele já completou para mim beleza coloquei um H1 e um H2 aqui dentro do Bori e importei o Styles Como Eu mencionei e nessa aula galera eu vou usar o Peter para formatar o meu código automaticamente então vocês vão ver

que o meu código vai ser formatado é porque eu estou usando opera então se você quiser usar você instala ele aí você vem nas configurações do vs code apertando control você procura por match ou um save ou formatar ou salvar você marca isso aqui e depois você procura perder folder ou formatador padrão se vocês tiverem em português e marca o trailer aí você vai ter o mesmo comportamento que eu e eu estou usando o Drácula fim Beleza então vamos lá pessoal vamos começar aqui no stiles vou colocar que o H1 vai ser da color Reds

e eu vou colocar que o H2 também vai ser da color red Agora vamos começar a brincar de fato como mediacris como mediacris galera a gente consegue falar para o CSS aplicar determinado estilo em determinada largura de dispositivo ou determinada altura Ok normalmente a gente vai fazer essa limitação com largura a gente não costuma usar right tá no caso a altura Então vamos já ver isso na prática como funciona vamos supor que a gente queira que esse texto seja da cor verde se a largura for sei lá de um dispositivo móvel Então vou inspecionar aqui

e eu vou marcar o iPhone XR aqui na nos dispositivos aqui e você vê que a largura dele é 414 Então vamos supor que a gente queira aqui o texto seja verde se a gente tiver no iPhone XR ou seja nessa largura como que a gente faz isso como muito simples a gente vem aqui no CSS a gente você vai colocar arroba mídia e aqui a gente vai colocar Max with 414 pixels que no caso é a largura do iPhone XR para pegar todos os celulares né porque tem celulares que podem ter uma wi-fi um

pouco maior Eu costumo colocar 450 pixels ou seja para todos os dispositivos que tiverem uma largura de 450 ou menor a gente vai aplicar os estilos que a gente colocar aqui dentro então no caso eu vou colocar que o H1 vai ser da color Green e que o H2 também vai ser da color Green agora se eu salvar ele vai ficar verde Olha que coisa sensacional E se eu voltar por exemplo se eu colocar responsa ver aqui e eu mexer na largura percebe que a largura tá mudando aqui tá vendo e ela só vai aplicar

realmente a color green quando a gente tiver obedecendo essa maxwift de 450 pixels ou seja assim a gente consegue customizar os nossos estilos para que eles fiquem de determinada forma em determinados dispositivos nesse caso em dispositivos móveis Ok se a gente quiser a gente pode expandir isso e colocar por exemplo outro mídia aqui outro MediaFire colocar Max with 768 pixels e aqui a gente pode colocar aqui o H1 vai ser Colors Yellow por exemplo e que o H2 vai ser Color e ela também agora se a gente salvar a gente vai perceber que esse cara

ele sobre escrever esse aqui certo ó tá vendo ó fica aí ela independente da largura porque ele tá saindo declarado depois desse aqui né esse aqui tá aqui E esse tá aqui então ele vai sobreviver Mas aí você pode me perguntar Felipe se eu quiser por exemplo que um estilo seja válido apenas para dispositivos entre 768 e entre 1024 pixels por exemplo Como que eu posso fazer isso se você não sabe 768 1024 é normalmente uma largura de um tablet ali tá então a gente pode fazer isso usando mini WiFi então aqui eu posso colocar

mini waff 768 pixels ands Max with 1024 pixels agora se eu salvar vamos ver o que vai acontecer ele vai ficar vermelho porque agora ele só vai aplicar essa coriello se a largura for entre 768 e entre mim 24 pixels ou seja se eu colocar 768 aqui ó dá uma olhada ó que ele colocou ela tá vendo se eu colocar 1024 ele também vai continuar ela e se eu colocar o 450 ele vai ficar com os estilos que a gente definiu aqui então o que a gente tá falando aqui a gente falou pro CSS o

seguinte cara até 450 pixels eu quero esse estilo e entre 768 pixels de largura e 1024 pixels eu quero esse estilo aqui então a gente pode até colocar um comentário aqui por exemplo celulares Ok e aqui tablets então o que que a gente tá fazendo aqui a gente tá definindo um estilo para celulares né que normalmente é essa largura aqui e o estilo para tablet a gente pode brincar é com uma Range de larguras dessa forma usando o mesmo waff e o maxwift então mais uma vez se ou seja em outras palavras né entre essa

Range de largura ou seja 7690 e assim por diante até 1:24 pixels eu quero aplicar esses estilos aqui abaixo disso eu vou aplicar esses estilos aqui se a largura for 450 no máximo né então se a largura for 500 por exemplo galera colocar 500 aqui ele vai aplicar esse estilo porque não tá obedecendo nem esse MediaFire e nem esse aqui então é assim que a gente consegue definir estilos seja para uma largura máxima como a gente fez aqui seja para uma Range né para um intervalo de larguras como a gente definiu aqui isso aqui é

bom quando a gente quer estilizar dispositivos específicos né então a gente quer estilizar tablets aqui a gente pode usar o minue maxwift pra gente especificamente estilizar essa rainha de largura aqui que é uma Range que corresponde a tablets beleza e outra coisa que a gente consegue escutar vamos dizer assim galera como ejacuwest é a orientação do dispositivo Ou seja a gente consegue verificar se o dispositivo ele tá de modo horizontal ou de modo vertical vou explicar para vocês se a gente colocar aqui vou colocar um comentário orientação horizontal tá então isso aqui é quando você

deita o celular né Por exemplo a gente consegue verificar esse tipo de situação aqui como media Cruz também é estilizá-la da forma que a gente quiser Então como que a gente faz isso a gente coloca o Mídia orientation e aqui a gente coloca landscape que é horizontal e aqui a gente pode colocar por exemplo que o H1 vai ser de color Blue e o H2 também vai ser de color Bloom Vou salvar não mudou nada porque porque essa orientation Land escape ela só vai ser de fato respeitada quando a largura for maior do que a

altura então por exemplo eu vou descer aqui ó e tá vendo que já é maior ó a largura é maior do que a altura então isso aqui já se encaixa como landscape né como como você realmente deitar o celular sabe quando você deita o celular a largura é maior do que altura então a gente aplica essa estilização aqui usando esse rancation Land escape no mediacube então isso aqui você vai usar bastante aí quando você quer deixar seu site responsivo obviamente para dispositivos móveis que estão em orientação horizontal Beleza então pessoal basicamente é isso aqui de

MediaFire é bem simples muita gente tem medo disso aqui quando vê um site responsivo acha que é super difícil de criar mas não é não cara é só você ir brincando aqui com mediacrise manipulando das wifes aqui que você consegue tranquilamente Por exemplo quando o a gente vai no celular você coloca uma com display flex ao invés de sei lá display Grid esse tipo de coisa você consegue fazer aqui e claro que a gente também galera pode estilizar é dispositivos específicos então a gente pode usar uma wi-fi aqui em vez de maxwift por exemplo um

caso bem comum é do iPhone se que ele é uma largura bem pequena e a gente pode estilizar o nosso site especialmente para ele então por exemplo se a gente colocar aqui mídia with 375 pixels a gente pode utilizar aqui o H1 por exemplo para ser de color sei lá vou colocar essa Blue Village aqui se a gente salvar a gente não vai ter uma diferença aqui porque esse cara está sobre escrevendo este né então para isso aqui funcionar a gente precisa colocar embaixo aqui beleza agora se a gente salvar Agora sim então no iPhone

se a gente tá aplicando esse estilo especificamente E se a gente mudar para outro celular por exemplo iPhone XR ele vai aplicar este aqui beleza então é assim que a gente consegue galera deixar Nossa aplicação nosso site responsivo utilizando médias em breve vai ser um vídeo aqui no canal que a gente vai usar MediaFire de forma bem intensiva porque a gente vai criar um site mobile first Dependendo da data que você tiver vendo esse vídeo já tá aqui no canal se já estiver eu vou colocar aqui no card para você assistir e também vou colocar

aqui na descrição um vídeo um pouco antigo já tem dois anos que eu postei o vídeo em que a gente fez um site responsivo usando média Cris Então vai te ajudar a fixar esse conteúdo Beleza vou deixar aqui no card também na verdade caso você queira acessá-lo Então pessoal é isso espero que você tenha entendido espero que eu tenha conseguido agregar algum valor para você nesse vídeo aqui e se eu conseguir cara deixa o seu joinha e se inscreve aqui no canal Porque isso me motiva demais a trazer conteúdo novo para você semanalmente de programação

conteúdo realmente de valor eu vou ficar por aqui te vejo no próximo vídeo tchau tchau e um abraço