Тёмный

APRENDA TUDO SOBRE MEDIA QUERY - COMO DEIXAR UM SITE RESPONSIVO 

Matheus Battisti - Hora de Codar
Подписаться 136 тыс.
Просмотров 57 тыс.
50% 1

🔴 Conheça nosso curso completo de HTML e CSS: app.horadecodar.com.br/course...
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.horadecodar.com.br/ebook-...
⭐ Arquivos: github.com/matheusbattisti/tu...
🔴 Instagram: @horadecodar 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord

Наука

Опубликовано:

 

20 июн 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 100   
@MatheusBattisti
@MatheusBattisti 2 месяца назад
🔴 Conheça nosso curso completo de HTML e CSS: app.horadecodar.com.br/course/curso-html-e-css-completo
@juaocapado
@juaocapado 7 часов назад
Muito Obrigado Matheus, tinha um site para entregar hoje e só faltava a responsividade, resolvi essa questão em 1 hora! Gratidão!!
@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!
@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 RU-vid tem o Blog com excelentes dicas, bora movimentar galera, curte e compartilhe o conteúdo.
@MatheusBattisti
@MatheusBattisti 2 года назад
valeu Caio, tamo junto! =))
@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 11 месяцев назад
@@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.
@felipe.py3
@felipe.py3 Год назад
Matheus, sua didática é impecável. Obrigado por compartilhar o seu conhecimento.
@vitaobrabo
@vitaobrabo 10 месяцев назад
Boa noite professor. Cara, que aula expetacular. Agradeço de coração por criar esse conteúdo de vasta informações. Tmj fessor.
@ericleirosario
@ericleirosario Год назад
Aula completamente sensacional 🎉👏👏 Tirou todas minhas dúvidas sobre @Media Query. Muito obrigado pelo conteúdo 👏
@PaulaFlavia1
@PaulaFlavia1 Год назад
Muito obrigada Matheus, espero que seu novo projeto seja "viral"
@zk_bob5897
@zk_bob5897 6 месяцев назад
Simplesmente uma aula perfeita não tive duvidas !
@mbs2488
@mbs2488 Год назад
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
@stone-witch
@stone-witch Год назад
Cara, vídeo muito bom! Me ajudou bastante, parabéns pela didática!
@luizotvio
@luizotvio 9 месяцев назад
Gostei demais da aula, finalmente consegui aprender alguma coisa de media query!!
@alessandroalmeida8017
@alessandroalmeida8017 8 месяцев назад
Estava precisando das informações finais. Obrigado!
@leekbiel
@leekbiel Год назад
Que aula top! Valeu professor!
@alexandreandrade5172
@alexandreandrade5172 Год назад
Valeu Matheus…. Obrigado pela aula. Vida longa….
@Erik-xv5kc
@Erik-xv5kc 4 месяца назад
que aula incrível, muito obrigado!!
@mateusmaquesdasilvamateus
@mateusmaquesdasilvamateus 27 дней назад
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
@Leanst.
@Leanst. 10 месяцев назад
Parabéns, claríssimo e didático!
@ricardocarvalhomiguel2684
@ricardocarvalhomiguel2684 Год назад
Conteúdo de qualidade como sempre
@l8k1nh07
@l8k1nh07 10 месяцев назад
CSS é algo que eu tenho bastante dificuldade, mas com essa aula ficou bem claro como funciona
@user-tn7gd5vl7q
@user-tn7gd5vl7q 22 дня назад
Muito bom. Obrigado pelo tutorial.
@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! =)
@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/
@edux1201
@edux1201 9 месяцев назад
cara, que aula fod4! mais um inscrito.
@raoniguimao
@raoniguimao 2 года назад
Cara, você é fantástico na sua didática! Obrigado pelos ensinamentos.
@MatheusBattisti
@MatheusBattisti 2 года назад
Valeuuu Raoni, tamo junto 😀
@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.
@lucianoprata86
@lucianoprata86 Месяц назад
Muito obrigado de verdade.
@JuliaGomesDev
@JuliaGomesDev Год назад
Só tenho a agradecer a você Matheus, muito obrigada!!
@MatheusBattisti
@MatheusBattisti Год назад
de nada Júlia, espero te ajudar mais! =)
@wellisonmouradearaujo4728
@wellisonmouradearaujo4728 Год назад
muito show o vídeo! top!
@user-xb1nb9bl4c
@user-xb1nb9bl4c 8 месяцев назад
Cara você é incrível
@christiandamasceno9658
@christiandamasceno9658 3 месяца назад
Ajudou d+ man.
@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
@leandromore6680
@leandromore6680 Год назад
top lindo ótima explicação
@ottomozale3931
@ottomozale3931 Год назад
vlw amigo. Amei a explicação
@thescriptkiddie
@thescriptkiddie Год назад
O exemplo do Joãozinho foi o melhor kakkakakaka, aula excelente, professor :D
@MatheusBattisti
@MatheusBattisti Год назад
hahah coitado do Jãozin! =D
@lucasraymundo4167
@lucasraymundo4167 Год назад
Aula top, bora praticar e integrar isso em alguns projetos
@MatheusBattisti
@MatheusBattisti Год назад
boa Lucas!
@miel7747
@miel7747 8 месяцев назад
top de mais esse canal.
@allanjose1437
@allanjose1437 Год назад
Ótima aula
@brunocoelho3636
@brunocoelho3636 2 года назад
Faz um vídeo explicando o conceito BEM no CSS
@andredias6356
@andredias6356 2 года назад
obrigado por compartilhar seu conhecimento.
@MatheusBattisti
@MatheusBattisti 2 года назад
de nada Andre!
@faustinofrancisco8138
@faustinofrancisco8138 Год назад
Ganhou mais um inscrito 👏👏
@zeleinelimao3589
@zeleinelimao3589 Год назад
muito bom. obrigada
@cristiannobrega1195
@cristiannobrega1195 2 года назад
Explicação muito boa. Muito obrigado!
@MatheusBattisti
@MatheusBattisti 2 года назад
valeuu Cristian! =)
@eliasalves7463
@eliasalves7463 2 года назад
Muito bom!
@madness3692
@madness3692 2 года назад
Sempre ótima aula!
@MatheusBattisti
@MatheusBattisti 2 года назад
valeu amigo!
@douglasandrade5199
@douglasandrade5199 2 года назад
Gostei. Obrigado!
@MatheusBattisti
@MatheusBattisti 2 года назад
valeu Douglas!
@nedersimoes
@nedersimoes Год назад
Como deixei passar batido essa aula hahaha... Top demais, aula sensacional!
@MatheusBattisti
@MatheusBattisti Год назад
valeuu Neder =D
@m1nello778
@m1nello778 2 года назад
Ótima aula, muito obrigado pelo conteúdo
@MatheusBattisti
@MatheusBattisti 2 года назад
valeuu, tamo junto!
@LyxBordados1
@LyxBordados1 Год назад
voce e muito bom explica muito bem parabens
@MatheusBattisti
@MatheusBattisti Год назад
valeu Marta! =D
@eduardogomes579
@eduardogomes579 Год назад
Obrigado professor!
@MatheusBattisti
@MatheusBattisti Год назад
de nada Eduardo!
@PabloDoebber
@PabloDoebber Год назад
Obrigado pelo vídeo!
@MatheusBattisti
@MatheusBattisti Год назад
de nada Pablo!
@David55293
@David55293 4 месяца назад
muito bom
@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!
@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?
@youtubernauta
@youtubernauta 2 года назад
Excelente 👏
@MatheusBattisti
@MatheusBattisti 2 года назад
valeu Daniel!
@wlisses-silva
@wlisses-silva 9 месяцев назад
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 RU-vid 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.
@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.
@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!
@matheusjean148
@matheusjean148 Год назад
Joãosinho, manda pro pae kkkkk
@IvanOlivenbaum
@IvanOlivenbaum Год назад
matheus, não tá funcionando para baixar o ebook
@dionevasconcelossilva9551
@dionevasconcelossilva9551 Год назад
position absolute interfere no media querry?
@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
@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
@joaocioccari4105
@joaocioccari4105 9 месяцев назад
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
@PAULOo32
@PAULOo32 11 месяцев назад
o meu orientation n ficou marcado n
@GeorgeNascimento08
@GeorgeNascimento08 Месяц назад
agora, com fontes sempre dão bugs
@gabrieloliboni7115
@gabrieloliboni7115 8 месяцев назад
acho q fiz algo errado, ou n esta funcionando ate o 9:33
@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
@FernandoHenrique-ni3qg
@FernandoHenrique-ni3qg 2 года назад
Video de CSS? Morri
@wevertonsantiago4305
@wevertonsantiago4305 Год назад
Muito bom!
@josefalcao2843
@josefalcao2843 Год назад
muito bom
Далее
Aprenda MEDIA QUERIES no CSS em 10 MINUTOS
10:32
Просмотров 33 тыс.
CSS Responsivo: A importância e COMO FAZER.
11:11
Просмотров 53 тыс.
🎙️ПЕСНИ ВЖИВУЮ от КВАШЕНОЙ💖
3:23:13
I Built 100 Homes And Gave Them Away!
09:36
Просмотров 51 млн
Programador Front-end Iniciante  - APRENDA ISSO!
6:10
Learn CSS in 20 Minutes
23:44
Просмотров 1,8 млн
Aprenda tudo sobre positions do CSS em 25 minutos
25:17
TELA DE LOGIN COM TEMA DARK | HTML +  CSS
38:58
Просмотров 341 тыс.
Aprenda Flexbox em 20 minutos - Tutorial de Flexbox
20:07
Menu Responsivo | HTML, CSS e JAVASCRIPT
17:40
Просмотров 92 тыс.