Sites responsivos com CSS Media Queries e Viewport

20.05.2015 | Tutoriais | 311 acessos

Neste tutorial, irei explicar como aplicar de modo simples, o media queries, dando a possibilidade do seu site de se tornar responsivo.

Entre as tags do cabeçalho (<head>), você deve adicionar a meta do viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Você deve criar uma folha de estilo, vamos chamá-la de media_queries.css, e importar em nossa página HTML, deixe essa folha de estilo como última para ser importada.

Na folha de estilo, é onde você vai definir as resoluções e inserir e trabalhar com suas configurações.

/* media_queries.css */@media screen and (max-width: 800px) {      SEU CSS PARA 800PX OU MENOS}

Pronto, o Media Queries está implantado em seu site e agora basta deixar responsivo.

Matheus Pereira

Tenho 24 anos de idade, sou paulistano, desenvolvedor web e graduado em gestão da tecnologia da informação. Adoro músicas, jogos eletrónicos e sou completamente apaixonado pelo mundo da internet.

Posts Relacionados

Momento Netflix: Assistam Explicando Código de Programação Curiosidades | 19.11.19

Assista um episódio do documentário "Explicando" da Netflix para conhecer mais sobre Código de Programação e o mundo binário da computação

Entenda o robots.txt e sua importância para os buscadores Curiosidades | 30.06.17

Entenda como definir algumas configurações ou como bloquear acesso dos robôs dos sites de buscando utilizando o robots.txt

Conheça o PngPix, um banco grátis de imagens transparentes Curiosidades | 03.03.17

O PNG PIX é um banco de imagens grátis, com inúmeras imagens com seus fundos transparentes. O sonho de todo designer

CARREGANDO