MediaQuery

Usando MediaQuery CSS3

E aí galera, vamos a mais um post da semana, Usando MediaQuery CSS3, neste iremos aprender a utilizar a MediaQuery, recurso maravilhoso do CSS3, sabemos da importância que é desenvolver um sistema que se adaptar a qualquer tamanho de tela, esse modulo do CSS3 nos auxilia a desenvolver aplicações em diferentes tamanhos de tela.

Código Base – MediaQuery

Neste código temos uma simples estrutura HTML5 com trés <div> e cada uma dessas tem um atributo do tipo class, na tag <head> temos a tag <style> com um simples CSS, que aplica bordas, cores e tamanho de fontes etc.

MediaQeury
Representação Código Base HTML5 no browser – MediaQuery

Vamos iniciar os estudos sobre MediaQuery, acompanhe…

Iniciamos o código com o símbolo da @media ( ) { } dentro do parentes escrevemos a condição que desejamos, neste exemplo a condição foi “se a largura for menor ou igual a 600px” o código que está entre as chaves será interpretado, ou seja, a cor do fundo irá ser deepskyblue, e a cor da fonte será branca. Veja no gif animado o resultado no broweser.

MediaQeury
MediaQuery

Podemos também usar o operador lógico OU observe:

Aqui estamos usando dois critérios sendo a virgula o separador, o segundo e a orientação da tela, o portrait modo retrato e landscape modo paisagem.

MediaQeury
MediaQuery

Continuando com o uso dos operadores lógicos, vamos utilizar o AND.

Estamos usando o operador AND, no caso o código só será interpretado “se a tela fica entre 500px a 1000px”, veja o gif.

 

 

MediaQeury
MediaQuery

Veja que a cor, tamanho e fundo são alterados conforme a tela é redimensionada, a MediaQuery é sem dúvida um recurso muito poderoso do CSS3, porém poucos desenvolvedores conhecem esse poder, e acaba usando frameworks muitas das vezes para coisas simples que a MediaQuery resolveria muito bem. e por desconhecimento desse módulo do CSS3, acaba deixando uma aplicação que era pra ser simples, complicada, adicionando framework e bibliotecas que fazem o mesmo trabalho.

Recomendação de Curso

O que você aprenderá neste curso

  1. Poderão montar qualquer tipo de site estático, seja ele o seu próprio portfólio, seu site pessoal ou a apresentação de sua empresa na internet criar sites responsivos de verdade;
  2. Cria layouts complexos com flexbox e CSS grid;

  3. Criar sites responsivos de verdade;

  4. Criar efeitos super interessantes com CSS3.


Curso Web Design Completo: HTML5, CSS3 e JS + 5 Projetos