No video

APRENDA TUDO SOBRE MEDIA QUERY - COMO DEIXAR UM SITE RESPONSIVO

  Рет қаралды 58,202

Matheus Battisti - Hora de Codar

Matheus Battisti - Hora de Codar

2 жыл бұрын

🔴 Conheça nosso curso completo de HTML e CSS: app.horadecoda...
Neste vídeo veremos um recurso super importante de #CSS que é o #mediaquery . Com ele, podemos deixar nossas páginas responsivas e até interagir com os elementos do #HTML através das regras de CSS.
Você vai ver também como aplicar o #mobilefirst em seus projetos, como trabalhar com orientation, ou seja, adicionar estilos em landscape, e até a outros modos, como: alterar CSS para impressão e leitores de tela.
📗 Garanta o seu ebook de boas práticas com HTML e CSS gratuito: www.horadecoda...
⭐ Arquivos: github.com/mat...
🔴 Instagram: @horadecodar 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord

Пікірлер: 101
@MatheusBattisti
@MatheusBattisti 4 ай бұрын
🔴 Conheça nosso curso completo de HTML e CSS: app.horadecodar.com.br/course/curso-html-e-css-completo
@lucas-mds-198
@lucas-mds-198 2 жыл бұрын
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_
@felipecoutinho_ 2 жыл бұрын
falou tudo estou tentando entender melhor % em e rem para utilizar nos projetos
@lucas-mds-198
@lucas-mds-198 2 жыл бұрын
@@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-mds-198
@lucas-mds-198 2 жыл бұрын
@@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_
@felipecoutinho_ 2 жыл бұрын
@@lucas-mds-198 Obg pelas dicas irei começar utilizas na pratica
@andreyribeiro7292
@andreyribeiro7292 Жыл бұрын
@@lucas-mds-198 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
@caioroberto3928 2 жыл бұрын
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 KZfaq tem o Blog com excelentes dicas, bora movimentar galera, curte e compartilhe o conteúdo.
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
valeu Caio, tamo junto! =))
@vitaobrabo
@vitaobrabo Жыл бұрын
Boa noite professor. Cara, que aula expetacular. Agradeço de coração por criar esse conteúdo de vasta informações. Tmj fessor.
@andrelopes1809
@andrelopes1809 Жыл бұрын
Vídeo bem completo e rápido, mas o melhor: com uma didática de se admirar, parabéns pelo seu empenho Matheus!
@ericleirosario
@ericleirosario Жыл бұрын
Aula completamente sensacional 🎉👏👏 Tirou todas minhas dúvidas sobre @Media Query. Muito obrigado pelo conteúdo 👏
@brickwall154
@brickwall154 Жыл бұрын
Seu conteúdo foi excelente e foi exatamente a aula que eu estava precisando! Muito obrigado Matheus 👊
@MatheusBattisti
@MatheusBattisti Жыл бұрын
showww deep, que bom que curtiu! Te convido tb a conhecer a nossa plataforma de cursos: horadecodar.com.br/comunidade-hora-de-codar/
@juaocapado
@juaocapado Ай бұрын
Muito Obrigado Matheus, tinha um site para entregar hoje e só faltava a responsividade, resolvi essa questão em 1 hora! Gratidão!!
@mateusmaquesdasilvamateus
@mateusmaquesdasilvamateus 2 ай бұрын
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
@Anonymox_
@Anonymox_ 4 күн бұрын
Esse é o melhor video sobre o assunto para acéfalos[ Eu :) ]
@Dariuh_Prince
@Dariuh_Prince 2 жыл бұрын
Abracos de Moçambique, muito obrigado, você é tão atencioso e simples na sua explicação. Parabéns.
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
obrigado Dariuh! =)
@felipe.py3
@felipe.py3 Жыл бұрын
Matheus, sua didática é impecável. Obrigado por compartilhar o seu conhecimento.
@raoniguimao
@raoniguimao 2 жыл бұрын
Cara, você é fantástico na sua didática! Obrigado pelos ensinamentos.
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
Valeuuu Raoni, tamo junto 😀
@raisasantos7264
@raisasantos7264 2 жыл бұрын
Esses dias tava vendo se tinha um vídeo assim no seu canal kkk, conhecidencia. Show!!!
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
aí sim Raisa! =D
@gabriel_lira
@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.
@l8k1nh07
@l8k1nh07 Жыл бұрын
CSS é algo que eu tenho bastante dificuldade, mas com essa aula ficou bem claro como funciona
@PaulaFlavia1
@PaulaFlavia1 2 жыл бұрын
Muito obrigada Matheus, espero que seu novo projeto seja "viral"
@andredias6356
@andredias6356 2 жыл бұрын
obrigado por compartilhar seu conhecimento.
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
de nada Andre!
@user-tn7gd5vl7q
@user-tn7gd5vl7q 2 ай бұрын
Muito bom. Obrigado pelo tutorial.
@thescriptkiddie
@thescriptkiddie 2 жыл бұрын
O exemplo do Joãozinho foi o melhor kakkakakaka, aula excelente, professor :D
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
hahah coitado do Jãozin! =D
@zk_bob5897
@zk_bob5897 8 ай бұрын
Simplesmente uma aula perfeita não tive duvidas !
@JuliaGomesDev
@JuliaGomesDev 2 жыл бұрын
Só tenho a agradecer a você Matheus, muito obrigada!!
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
de nada Júlia, espero te ajudar mais! =)
@lucianoprata86
@lucianoprata86 3 ай бұрын
Muito obrigado de verdade.
@luizotvio
@luizotvio 10 ай бұрын
Gostei demais da aula, finalmente consegui aprender alguma coisa de media query!!
@nedersimoes
@nedersimoes 2 жыл бұрын
Como deixei passar batido essa aula hahaha... Top demais, aula sensacional!
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
valeuu Neder =D
@brunocoelho3636
@brunocoelho3636 2 жыл бұрын
Faz um vídeo explicando o conceito BEM no CSS
@alessandroalmeida8017
@alessandroalmeida8017 9 ай бұрын
Estava precisando das informações finais. Obrigado!
@lucasraymundo4167
@lucasraymundo4167 Жыл бұрын
Aula top, bora praticar e integrar isso em alguns projetos
@MatheusBattisti
@MatheusBattisti Жыл бұрын
boa Lucas!
@douglasandrade5199
@douglasandrade5199 2 жыл бұрын
Gostei. Obrigado!
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
valeu Douglas!
@miel7747
@miel7747 10 ай бұрын
top de mais esse canal.
@leekbiel
@leekbiel Жыл бұрын
Que aula top! Valeu professor!
@Erik-xv5kc
@Erik-xv5kc 6 ай бұрын
que aula incrível, muito obrigado!!
@ricardocarvalhomiguel2684
@ricardocarvalhomiguel2684 Жыл бұрын
Conteúdo de qualidade como sempre
@stone-witch
@stone-witch Жыл бұрын
Cara, vídeo muito bom! Me ajudou bastante, parabéns pela didática!
@Leanst.
@Leanst. 11 ай бұрын
Parabéns, claríssimo e didático!
@cristiannobrega1195
@cristiannobrega1195 2 жыл бұрын
Explicação muito boa. Muito obrigado!
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
valeuu Cristian! =)
@mbs2488
@mbs2488 Жыл бұрын
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
@LyxBordados1
@LyxBordados1 Жыл бұрын
voce e muito bom explica muito bem parabens
@MatheusBattisti
@MatheusBattisti Жыл бұрын
valeu Marta! =D
@alexandreandrade5172
@alexandreandrade5172 2 жыл бұрын
Valeu Matheus…. Obrigado pela aula. Vida longa….
@edux1201
@edux1201 11 ай бұрын
cara, que aula fod4! mais um inscrito.
@madness3692
@madness3692 2 жыл бұрын
Sempre ótima aula!
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
valeu amigo!
@m1nello778
@m1nello778 2 жыл бұрын
Ótima aula, muito obrigado pelo conteúdo
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
valeuu, tamo junto!
@user-xb1nb9bl4c
@user-xb1nb9bl4c 9 ай бұрын
Cara você é incrível
@eduardogomes579
@eduardogomes579 Жыл бұрын
Obrigado professor!
@MatheusBattisti
@MatheusBattisti Жыл бұрын
de nada Eduardo!
@munirarabi5397
@munirarabi5397 2 жыл бұрын
valeu pelo conteudo profesosor!!! uma ideia de video, se puder trazer um video sobre um CRUD com firebase e js
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
boa sugestão Munir!
@leandromore6680
@leandromore6680 Жыл бұрын
top lindo ótima explicação
@christiandamasceno9658
@christiandamasceno9658 5 ай бұрын
Ajudou d+ man.
@wellisonmouradearaujo4728
@wellisonmouradearaujo4728 Жыл бұрын
muito show o vídeo! top!
@ottomozale3931
@ottomozale3931 Жыл бұрын
vlw amigo. Amei a explicação
@PabloDoebber
@PabloDoebber 2 жыл бұрын
Obrigado pelo vídeo!
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
de nada Pablo!
@youtubernauta
@youtubernauta 2 жыл бұрын
Excelente 👏
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
valeu Daniel!
@faustinofrancisco8138
@faustinofrancisco8138 Жыл бұрын
Ganhou mais um inscrito 👏👏
@allanjose1437
@allanjose1437 Жыл бұрын
Ótima aula
@wlisses-silva
@wlisses-silva 11 ай бұрын
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 KZfaq 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.
@David55293
@David55293 5 ай бұрын
muito bom
@zeleinelimao3589
@zeleinelimao3589 Жыл бұрын
muito bom. obrigada
@matheusbernieri6025
@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.
@NandaVieira
@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?
@wevertonsantiago4305
@wevertonsantiago4305 2 жыл бұрын
Muito bom!
@juniorlopes6040
@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!
@vitorolivera11
@vitorolivera11 2 жыл бұрын
A quantidade de media query depende do tipo de projeto né um tamanho pra celular outro computador etc
@MatheusBattisti
@MatheusBattisti 2 жыл бұрын
Exatamente Vitor, e até cabe a pergunta: precisamos adaptar para tablet ou está bom assim? Um exemplo..
@vitorolivera11
@vitorolivera11 2 жыл бұрын
@@MatheusBattisti vdd
@dionevasconcelossilva9551
@dionevasconcelossilva9551 Жыл бұрын
position absolute interfere no media querry?
@joaocioccari4105
@joaocioccari4105 10 ай бұрын
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
@matheusjean148
@matheusjean148 Жыл бұрын
Joãosinho, manda pro pae kkkkk
@IvanOlivenbaum
@IvanOlivenbaum Жыл бұрын
matheus, não tá funcionando para baixar o ebook
@marcioaquilles
@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
@joaovitor-se4cu Жыл бұрын
sim
@PAULOo32
@PAULOo32 Жыл бұрын
o meu orientation n ficou marcado n
@Fernando_A_Cas
@Fernando_A_Cas Жыл бұрын
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
@GeorgeNascimento08
@GeorgeNascimento08 3 ай бұрын
agora, com fontes sempre dão bugs
@gabrieloliboni7115
@gabrieloliboni7115 10 ай бұрын
acho q fiz algo errado, ou n esta funcionando ate o 9:33
@FernandoHenrique-ni3qg
@FernandoHenrique-ni3qg 2 жыл бұрын
Video de CSS? Morri
@eliasalves7463
@eliasalves7463 2 жыл бұрын
Muito bom!
@josefalcao2843
@josefalcao2843 Жыл бұрын
muito bom
Curso de HTML e CSS com projeto - HTML e CSS para iniciantes
2:59:27
Matheus Battisti - Hora de Codar
Рет қаралды 155 М.
Aprenda Responsividade no REACT | Deixe seu Site Responsivo
23:20
DevClub | Programação
Рет қаралды 3,8 М.
Joker can't swim!#joker #shorts
00:46
Untitled Joker
Рет қаралды 36 МЛН
Can A Seed Grow In Your Nose? 🤔
00:33
Zack D. Films
Рет қаралды 32 МЛН
Aprenda MEDIA QUERIES no CSS em 10 MINUTOS
10:32
Felipe Rocha • dicasparadevs
Рет қаралды 35 М.
CSS Responsivo: A importância e COMO FAZER.
11:11
DevMedia
Рет қаралды 54 М.
Como deixar um site responsivo - Portfólio com HTML e CSS - Pt. 08/08
29:06
Inteliogia - Dev's Insights
Рет қаралды 33 М.
A practical guide to responsive web design
23:13
Kevin Powell
Рет қаралды 188 М.
Aprenda Flexbox em 20 minutos - Tutorial de Flexbox
20:07
Matheus Battisti - Hora de Codar
Рет қаралды 50 М.