APRENDA TUDO SOBRE MEDIA QUERY - COMO DEIXAR UM SITE RESPONSIVO

[@MatheusBattisti]

🔴 Conheça nosso curso completo de HTML e CSS: app.horadecodar.com.br/course/curso-html-e-css-completo

[@lucas-morais-1998]

Conteúdo massa como sempre! Uma dica legal pra quando se trabalha com responsividade é usar medidas como %, rem e em, você pode por exemplo, aplicar porcentagem no tamanho da fonte no elemento html, com base na media query e depois utilizar rem quando precisar definir alguma medida, ela será sempre relativa a porcentagem aplicada anteriormente, dessa forma já conseguimos ganhar uma leve responsividade com regras simples.

[@felipecoutinho_]

falou tudo estou tentando entender melhor % em e rem para utilizar nos projetos

[@lucas-morais-1998]

@@felipecoutinho_ Olha se me permite dar uma dica, pense assim: doc html tem um font-size padrão de 16px, ou seja 16px = 100%. Agora imagina que voce tenha uma media query para tablet @media (max-width: 720px) você quer diminuir esse font-size digamos que para 14px, adicionar 14px na media query é uma prática ruim, pois alguns usuários utilizam um tamanho de fonte personalizado no celular (minha mãe aumenta tudo no máximo 😂) sendo assim o px não irá respeitar essa configuração do usuário, pra isso você pode converter esses 14px em %, ficando com 87.5% uma medida que será relativa ao tamanho da fonte independente de qualquer configuração que o usuário tenha.

[@lucas-morais-1998]

@@felipecoutinho_ Ah e o cálculo pra conversão é simples, basta pegar o tamanho que você deseja aplicar em px, multiplicar por 100 e por fim dividir por 16 (tamanho padrão do htm). Exp: 15px -> % 15 * 100 = 1.500 1.500 / 16 = 93.75% Mas não precisa se preocupar com isso tem vários sites que fazem a conta basta jogar no Google 😅

[@felipecoutinho_]

@@lucas-morais-1998 Obg pelas dicas irei começar utilizas na pratica

[@andreyribeiro7292]

@@lucas-morais-1998 Caramba, Lucas! Sei que não era pra mim, mas muito obrigado por essa explicação! Até printei aqui pra começar a testar nos próximos projetos.

[@caioroberto3928]

Boa noite Prof° Matheus, obrigado pelo excelente conteúdo, quem tem Qualifica no seu serviço de Internet, procura os cursos do professor, quem não tem vai pela Udemy, eu tenho em ambas plataformas e recomendo demais, além do KZbin tem o Blog com excelentes dicas, bora movimentar galera, curte e compartilhe o conteúdo.

[@MatheusBattisti]

valeu Caio, tamo junto! =))

[@juaocapado]

Muito Obrigado Matheus, tinha um site para entregar hoje e só faltava a responsividade, resolvi essa questão em 1 hora! Gratidão!!

[@vitaobrabo]

Boa noite professor. Cara, que aula expetacular. Agradeço de coração por criar esse conteúdo de vasta informações. Tmj fessor.

[@mateusmaquesdasilvamateus]

amei sua didatica, assim que eu acabar meu curso da b7web sem duvidas irei fazer um dos seus, desde ja muito obrigado pela aula, me ajudou muito msm

[@andrelopes1809]

Vídeo bem completo e rápido, mas o melhor: com uma didática de se admirar, parabéns pelo seu empenho Matheus!

[@felipe.py3]

Matheus, sua didática é impecável. Obrigado por compartilhar o seu conhecimento.

[@Dariuh_Prince]

Abracos de Moçambique, muito obrigado, você é tão atencioso e simples na sua explicação. Parabéns.

[@MatheusBattisti]

obrigado Dariuh! =)

[@raisasantos7264]

Esses dias tava vendo se tinha um vídeo assim no seu canal kkk, conhecidencia. Show!!!

[@MatheusBattisti]

aí sim Raisa! =D

[@raoniguimao]

Cara, você é fantástico na sua didática! Obrigado pelos ensinamentos.

[@MatheusBattisti]

Valeuuu Raoni, tamo junto 😀

[@thescriptkiddie]

O exemplo do Joãozinho foi o melhor kakkakakaka, aula excelente, professor :D

[@MatheusBattisti]

hahah coitado do Jãozin! =D

[@brickwall154]

Seu conteúdo foi excelente e foi exatamente a aula que eu estava precisando! Muito obrigado Matheus 👊

[@MatheusBattisti]

showww deep, que bom que curtiu! Te convido tb a conhecer a nossa plataforma de cursos: horadecodar.com.br/comunidade-hora-de-codar/

[@PaulaFlavia1]

Muito obrigada Matheus, espero que seu novo projeto seja "viral"

[@ericleirosario]

Aula completamente sensacional 🎉👏👏 Tirou todas minhas dúvidas sobre @Media Query. Muito obrigado pelo conteúdo 👏

[@l8k1nh07]

CSS é algo que eu tenho bastante dificuldade, mas com essa aula ficou bem claro como funciona

[@Anonymox_]

Esse é o melhor video sobre o assunto para acéfalos[ Eu :) ]

[@Marcos582s]

Simplesmente uma aula perfeita não tive duvidas !

[@andredias6356]

obrigado por compartilhar seu conhecimento.

[@MatheusBattisti]

de nada Andre!

[@luizotvio]

Gostei demais da aula, finalmente consegui aprender alguma coisa de media query!!

[@alessandroalmeida8017]

Estava precisando das informações finais. Obrigado!

[@gabriel_lira]

As unidades de medidas são outro assunto importantíssimo para responsividade, eu mal utilizo o mediasquery quando se tem as unidades de medidas como vh ou em.

[@JuliaGomesDev]

Só tenho a agradecer a você Matheus, muito obrigada!!

[@MatheusBattisti]

de nada Júlia, espero te ajudar mais! =)

[@lucasraymundo4167]

Aula top, bora praticar e integrar isso em alguns projetos

[@MatheusBattisti]

boa Lucas!

[@nedersimoes]

Como deixei passar batido essa aula hahaha... Top demais, aula sensacional!

[@MatheusBattisti]

valeuu Neder =D

[@Erik-xv5kc]

que aula incrível, muito obrigado!!

[@brunocoelho3636]

Faz um vídeo explicando o conceito BEM no CSS

[@madness3692]

Sempre ótima aula!

[@MatheusBattisti]

valeu amigo!

[@miel7747]

top de mais esse canal.

[@RodrigoHeard-v7t]

Muito bom. Obrigado pelo tutorial.

[@leekbiel]

Que aula top! Valeu professor!

[@edux1201]

cara, que aula fod4! mais um inscrito.

[@WalterMonteiroMonteiro-k6q]

Cara você é incrível

[@douglasandrade5199]

Gostei. Obrigado!

[@MatheusBattisti]

valeu Douglas!

[@ricardocarvalhomiguel2684]

Conteúdo de qualidade como sempre

[@lucianoprata86]

Muito obrigado de verdade.

[@leandromore6680]

top lindo ótima explicação

[@alexandreandrade5172]

Valeu Matheus…. Obrigado pela aula. Vida longa….

[@stone-witch]

Cara, vídeo muito bom! Me ajudou bastante, parabéns pela didática!

[@mbs2488]

Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

[@LyxBordados1]

voce e muito bom explica muito bem parabens

[@MatheusBattisti]

valeu Marta! =D

[@Leanst.]

Parabéns, claríssimo e didático!

[@eduardogomes579]

Obrigado professor!

[@MatheusBattisti]

de nada Eduardo!

[@wellisonmouradearaujo4728]

muito show o vídeo! top!

[@cristiannobrega1195]

Explicação muito boa. Muito obrigado!

[@MatheusBattisti]

valeuu Cristian! =)

[@faustinofrancisco8138]

Ganhou mais um inscrito 👏👏

[@ottomozale3931]

vlw amigo. Amei a explicação

[@munirarabi5397]

valeu pelo conteudo profesosor!!! uma ideia de video, se puder trazer um video sobre um CRUD com firebase e js

[@MatheusBattisti]

boa sugestão Munir!

[@PabloDoebber]

Obrigado pelo vídeo!

[@MatheusBattisti]

de nada Pablo!

[@dionevasconcelossilva9551]

position absolute interfere no media querry?

[@wlisses-silva]

Olá Matheus, tudo bem? Gosto muito de seu canal no youtube e sempre estou vendo seus vídeos por lá. E como vc é fera em CSS gostaria de tirar uma dúvida... Eu vejo vídeos de diferentes pessoas no KZbin e em particular cada pessoa tem uma forma ou acha uma forma mais adequando de construir a estrutura do arquivo CSS. Vou explicar... junto vem a dúvida. Tem pessoas que usam apenas um arquivo style.css e faz toda estilização neste mesmo arquivo. Outras usam uma pasta CSS e dentro divide os arquivos conforme as tags mais importantes como: > header > body >footer Essa é minha dúvida, qual a melhor forma é indicado para se ter boas práticas e ter um bom desempenho do site?? Tem algum vídeo que mostre essa estruturação do CSS? Desde já, muito obrigado por compartilha seus conhecimentos através do canal.

[@christiandamasceno9658]

Ajudou d+ man.

[@NandaVieira]

Parabeéns pelo conteúdo !! Estou com uma dúvida, e nao sei onde estou errando. Quando aciono o @media , não está mantendo as configuração padrões. Onde posso esta errando?

[@allanjose1437]

Ótima aula

[@IvanOlivenbaum]

matheus, não tá funcionando para baixar o ebook

[@juniorlopes6040]

terminei um projeto a pouco tempo só que quando fui abrir pela a tela do celular não ficou muito legal, essa é a linguagem que preciso pra melhorar ainda mais!

[@youtubernauta]

Excelente 👏

[@MatheusBattisti]

valeu Daniel!

[@matheusbernieri6025]

kkk, podia contar mais dessas do fulaninho fazendo cag** espertão 😅 Conteúdo top cara, logo estarei adquirindo algum curso seu, grande abraço.

[@PJosué-k3l]

Como faço para entrar na comunidade do WhatsApp ??

[@joaocioccari4105]

Sintaxe eh brabo mesmo, tava codando um site e criei um script em js que ativava o botao com o click do mouse, mas eu escrevi click com C maiusculo, perdi quase 30 minutos pra descorbrir kkkkk

[@falkoreads]

muito bom. obrigada

[@Oliveirav11]

A quantidade de media query depende do tipo de projeto né um tamanho pra celular outro computador etc

[@MatheusBattisti]

Exatamente Vitor, e até cabe a pergunta: precisamos adaptar para tablet ou está bom assim? Um exemplo..

[@Oliveirav11]

@@MatheusBattisti vdd

[@matheusjean148]

Joãosinho, manda pro pae kkkkk

[@PAULOo32]

o meu orientation n ficou marcado n

[@gabrieloliboni7115]

acho q fiz algo errado, ou n esta funcionando ate o 9:33

[@eliasalves7463]

Muito bom!

[@driaMuniz_Cyber]

A configuração para print nao rolou h1{ color: red; } /* 2 - sintaxe */ @media screen and (max-width: 500px){ /* (quando for menor do que 500 px)MAX WIDTH = TELAS MENORES QUE ALGUMA RESOLUÇÃO */ h1{ color: blue; } } /* a partir desse momento faça alguma coisa, antes dessa resolução faça outra coisa */ /* 3 - Outros modos */ /* screen, print, speech, all */ @media print and (max-width:600px){ h1{ color: green; } }

[@marcioaquilles]

Olá Mateus deixa ver se entendi, começamos pelo mobile first no caso essa regra ficaria na parte geral e depois adaptamos através de break points com min-wdth para resoluções maiores é isso?

[@joaovitor-se4cu]

sim

[@driaMuniz_Cyber]

No print nao rolou ! Nao muda!

[@josefalcao2843]

muito bom

[@GeorgeNascimento08]

agora, com fontes sempre dão bugs

[@FernandoAugustoCasali]

sabe oq eu percebi, se vc tiver usando elementor anteriormente de aprender CSS e HTML vc já vem com as ideias pré estabelecidas na cabeça...ehheheheh

[@FernandoHenrique-ni3qg]

Video de CSS? Morri

[@wevertonsantiago4305]

Muito bom!

[@David55293]

muito bom