Múltiplas Media Features com CSS - @Curso em Vídeo HTML5 e CSS3

é isso aqui é mais um vídeo relativo ao 25º capítulo do nosso material de apoio no vídeo anterior nós falamos sobre os metais agora nós vamos falar sobre as mídias features in [Aplausos] E aí [Música] o Olá tudo bem com você seja muito bem vindo muito bem vindo a mais um vídeo aqui do seu curso de html CSS já deve tá cansada tá cansada de ouvir falar essa frase né mas enquanto houver vídeo essa frase existirá nós estamos aqui no capítulo 25 falando sobre mídia kiwis você espero sinceramente que você já tenha entendido que são

dia crio senão não faz nenhum sentido você está vendo esse vídeo Faz um favor para você mesmo volta um dois três vídeos por Mente Três vídeos e assistir o primeiro vídeo onde eu expliquei que São Miguel com ele se você não vai entender no vídeo anterior nós falamos sobre mediatas nós falamos sobre os dois principais medi a tarde que são screen e o print eu não falei sobre media Type of depois a gente vai comentar sobre a gente comenta já nessa aula aqui mas agora eu vou falar sobre um complemento que são as mídias features

vamos entender basicamente para quem que elas servem e como elas ajudam as mídias fios a ficarem completinha você que tá aqui assistindo esse novo módulo do curso de html tá e agora ou já aprendeu algum tempo não sei que ponto você tá no curso hoje pedal seu site gratuitamente utilizando o hip-hop pages só que você também deve ter notado que ele é bem limitado até porque ele é de graça então não tem como ter muitos recursos além do HTML básico CSS básico e o Java script Inicial Mas se você quiser um hospedagem profissional com suporte

a PHP e muitas outras ferramentas Premium inclusive ganhando além da hospedagem ferramentas que são pagas ferramentas caras sem pagar mais nada por isso e também cursos para você aprender a utilizar Maioria dessas ferramentas Pois então Torres e agora mesmo um cliente uma cliente da hostnet e lá escolhendo o plano Cloud a partir do plano trimestral você também ganha domínio grátis torne-se agora um assinante da Rússia net e leve o seu site os melhores servidores que a gente pode oferecer acesse agora o site da hostnet apontando o seu celular o QR Code ficar aparecendo aqui na

sua tela voltamos agora para sua programação normal e já vem a tela do computador aí para você fazer sua prática de html E aí bom então já estou aqui com os exercícios da aula anterior Já devidamente atualizados no nosso repositório eu nem sempre vou atualizar aqui durante a gravação de vídeo eu gravo depois da gravação vou lá e Atualize o repositório e tudo mais e na aula anterior eu te como eu te disse a gente viu meio-dia screen e mídia print essa daqui são que a gente chama de mídia Tais fracções tipos de mídia então

você pode botar existe tela existe impressora existe impressora de Braile existe Red existem alguns militares que nem são utilizados a gente vai utilizar basicamente screen print e ou esse ou como você vem pode imaginar é todo tipo de mídia mas a gente viu no exercício anterior duas coisas muito importantes e que ficaram faltando talvez você não tenha percebido que esteja faltando mas eu sei que tá eu tô te falando que tá faltando em primeiro lugar eu seguinte hora falo scream eu falo de tela sua cara ela Tem de vários tamanhos como eu já citei né

o seu relógio o seu celular um pouquinho e o tablet maior ainda o seu notebook é maior o seu computador aquela provavelmente a maior do que a do notebook eles tem os telões nos monitores gigantes acho que ter vez enfim a gente tem um monte de mim quando eu falo de screen é muito genérico fala só screen só que não existe nenhum detalhe para tela pequenininha tela de celular para ela de dar não existe me de tarde para isso mas existem as mídias features e eu vou te mostrar como elas se combinam então basicamente que

eu quero postar norte da sala que é muito importante o seguinte media-query a mídia kiwi é igual é a mesma coisa assim media-type mais minhas fichas certo então hoje a tarde é tipo de mídia mídia Fit é característica de milha do Existem várias características Nutella Então existe um detalhe que a tela mas existem características de tela vezes em telas diferentes eu vou começar com a minha fica bem simples o na tá a gente vai entender e a segunda coisa falei que era 12 coisas que a gente tinha visto de pro a ver faltava as minhas

fichas que a gente vai acrescentar depois tá quando eu criei dá uma olhada aqui ó o Media screen media print quando eu fiz as configurações aqui de tela e de impressora então tchau eu tenho o arquivo tela CSS o arquivo impressoras e quando eu fiz tela eu fiz todas as configurações Olha o filme impressora eu tive que fazer as mesmas configurações muitas das vezes por exemplo aqui ó font-size dizer que ele é o tamanho padrão né do HTML eu fiz nos dois ó tá vendo Então assim você vai começar você pegar vendo que algumas configurações

para tela impressora são iguais algumas são diferentes mas algumas são embaixo e é para isso que a gente vai utilizar mais um tipo que é o tipo UOL Tá então vamos vamos entender como funciona a mídia Fischer e como funciona esse sol Feche todos os seus arquivos e nós vamos criar uma página nova a gente tem uma mq01 eu expliquei nos vídeos anteriores porque a gente não está trabalhando direto aqui ó do 25 a gente fez forme um só me deu Charme tais como arquivos não 26 o projeto como uma pasta já expliquei o motivo

disso Veja a anteriormente se você pulou o vídeo então vou clicar aqui na pasta exercício 26 e vou criar uma nova pasta que é o MQ MQ 002 que nós vamos criar o segundo exercício tá o segundo exercício ou criar já aqui dentro o arquivo index. HTML Beleza já tem windex vou criar o meu código base Vou botar aqui em português Vou colocar aqui mídia Crio e você vai colocar o que você quiser e nesse exercício eu vou ter só uma coisa eu tenho um agarrão dentro do bari que vai ser mude a orientação do

seu celular do seu dispositivo o que pode ser né vários outros eu vou salvar vamos salvar ao salvar aí eu vou abrir a pasta lá na minha pasta de documentos está estudos HTML e CSS exercícios o exercício 26 O que é o que a gente está fazendo minha crio visualizado antes de mais nada eu vou fazer o seguinte aqui ó lembra que a gente baixou imagens ele passou várias imagens eu não vou querer todas essas nesse exercício nesse exercício você vai querer só essa daqui ó ou sem vídeo landscape e Curso em vídeo por trás

que é o retrato e paisagem na retrata o corte e levo skate é paisagem selecione esses dois da contra você né copia vai vir aqui dentro do exercício 26 nt-002 você vai criar aqui uma pasta imagem então a botão direito vamos criar um novo pasta imagens e dentro dessa pasta imagens importante dentro dessa pasta imagem podar control over para ter esses dois arquivos aqui então a partir de agora eu tenho a pasta imagem com duas imagens beleza Vamos abrir esse esse arquivo winderton mt-002 abrir o resultado aqui ele sabe de alguém lançou tipo assim é

desse jeito aí vai pedir só que eu mude a orientação aqui no meu computador não tem orientação né Se eu mudar seu virar meu notebook botar delicadas relaxa o dispositivo não sabe que ele tá de cabeça para baixo agora se eu pego um celular ele tem um acelerômetro crianças eu deito a tela é uma tela seu mira dela é outra tela então eu vou te mostrar aqui ó Então assim tá aqui ó quando a tela tá em pé é uma apresentação se eu deitar é outra apresentação tá vendo Então ele mudou o site né para

aqui para quando a tela está em pé ou quando aquela tá deitada isso a gente chama de orientação né se o celular tá em pé celular ou tablet está em pé ou deitado alguns monitores tem essa orientação também para saber se ele tá em pé ou deitada basicamente é os computadores eles vão pegar pela resolução da tela se altura tá maior do que a largura como esse caso aqui ele tá como por três ele tá como interno seu começa a puxar aqui e coloca ele mais largo do o Comprido né mas mais largo do que

alto ele está em modo landscape então a gente basicamente vai identificar se o aparelho está em pé ou deitado agora só um minutinho rapidinho coisa rápida Eu te prometo você tá fazendo um curso de html aqui com a gente ainda não sei se você sabe no canal do Conselho vídeo e no site do curso em vídeo Existem muitos outros cursos que você pode fazer com a gente existe curso de linguagem como Python JavaScript PHP e também existem cursos de redes curso de USB wi-fi banco de dados e até mesmo marketing digital construção de sites usando

o WordPress e muitos outros cursos então não perde tempo cara faz o seu curso de html aqui mas faz também os outros cursos que a gente oferece todos gratuitamente para você muito obrigado pela paciência e voltamos a nossa aula e aí eu já vou te ensinar uma outra coisa eu não vou criar uma configuração só para quem tá em pé e só para quem tá deitado eu vou fazer isso aqui ó dá uma olhada lá na área Harry vou criar aqui o link CSS um estar e eu vou chamar de estilos/sai o ponto CSS e

o Mídia aqui eu vou colocar o quê que significa isso essas configurações aqui elas vão servir para todos os dispositivos lembra que eu falei quando a gente fez até uma impressora e deveria ter diferença entre pela impressora algumas configurações repetiram eu vou fazer a configuração geral aqui vale para todos os dois aqui no milhão certo e aí eu posso criar outras mídias com eles tal eu vou botar aqui ó nem CSS eu vou chamar aqui ó de estilos/retrato ou vou botar aqui no pé em pé Maringá tá vai ser para Media screen e vou criar

um outro carro que a gente já vai adicionar as mídias vou chamar de estilos/deitado verdades estamos são péssimos é o ideal seria botar a retrato e paisagem para retrato e paisagem feijão tá aí deitada Vamos aprender de formar mais profissionais ó e aqui também mídia é só falar para o Guanabara você fez duas configurações para me destruir só que era só eu vou além do mediatype Espanha mediatype eu vou fazer o seguinte ó scream.and eu estou adicionando configurações media-type são escritos assim normalmente mídia features São escritas entre parênteses Então vou botar aqui ó é entre

aqui eu tô dizendo que eu vou me informar uma mídia Fit uma característica a característica que eu vou colocar é orientation acredita que digitar tá orientei orientation orientación: e vai colocar essa aqui é o retrato Então por cuidado falando digitar errado tá por trás dessa forma e aqui eu vou botar te dar uma encolhido aqui tem que ficar tudo na mesma linha antes orientation Clans quem tá então que eu tô fazendo aqui esse arquivo retrato com CSS vai me dar as configurações para todas as tela o feijão em modo retrato e paisagem vai mostrar todas

as telas em modo paisagem moda deitado certo Então olha só dá uma olhada aqui a nota no seu material que é o seguinte quando eu uso mídia eu posso informar media-type e também mídia features media types não tem parênteses mídia features são indicados entre parênteses isoladamente só tem 36 fishers eu vou ter que ter três parênteses certo no meu caso aqui nesse exercício a gente vai usar somente um e esse ó aqui é um já Type que vai me dizer o seguinte Olha isso é para todo tipo de mídia pode ser pessoa pode ser vai

servir para todos e esses daqui vão fazer as configurações somente as configurações adicionais que não estão nesse meio estilo principal fechou a gente fechar esse vídeo a gente vai fazer esse exercício em mais de um vídeo tá para a gente não fazer nada na correria eu vou fazer o seguinte ó seguro com outro bloquear esse arquivo ele vai perguntar eu mando criar Vou colocar aqui o cassete o F8 seguro voltei para o index Segurei o conto cliquei em retratos ISS tem que segurar encontro tá vou colocar também aqui o cassete esse daqui vai ser aparelho

em pé por frente esse daqui no Style botar aqui configurações Gerais só como comentário aqui só para ficar mais claro e por último seguro contato cliquei no nome paisagem CSS uma de criar o arquivo Vou colocar aqui também o carpete e vou colocar um comentário aparelho deitado modo lento skate Então beleza Já criei Vou colocar aqui em ordem aqui ó Já criei o estilo Já criei o retrato e Já criei a paisagem peça basicamente ó eu tenho uma mensagem que mude orientação de dispositivo sem problema nenhum a Eu tenho um retrato e eu tenho paisagem

deixe o seu é desse jeito tava uma que atualizar o gift Card agora botar aqui ó exercício 002 de mídia crie Comentei no repositório local depois vou atualizar lá no repositório que eu também vou testar no meu celular se projeta funcionando não agora né vamos continuar o projeto quando ele tiver termina alinho a gente testa ele no nosso celular fechou utilizando o Rampage diz que a gente viu lá no capítulo 18 só deixamos no 25 você pulou 18 que achou aqui a gente acaba e não era útil pé volta lá e aprendi que é muito

importante você já deve ter percebido que a gente tá utilizando em todos os capítulos desde então eu me despeço por aqui mas não sem antes te dar aquela dica caprichada cara assiste esses vídeos com muita calma ao muito importante todos os seus projetos vão ter a partir de agora Todos deveriam ter desde o início mas a gente tava na evolução não passei isso para frente mas eles são minha cruz é um assunto é muito importante você precisa aprender treina Anota tudo no próximo vídeo a gente dá continuidade a esse projeto fazendo essas duas amigas funcionários

tanto UOL quanto né O amido Type Ball quanto as mídias Beach Convention na paisagem paisagem e retrato Fechou então é isso meu povo treino aí deixa os seus arquivos exatamente como a gente fez aqui vai vendo esse vídeo pausando devagarinho e a gente se vê na próxima desse ponto Em Diante O grande abraço tchau tchau [Música] [Aplausos] E aí [Música] [Aplausos] [Música] E aí [Música]