Sites responsivos com CSS Media Queries e Viewport

20.05.2015 | Tutoriais | 565 visualizações

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.0">

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 (min-width: 800px) { SEU CSS PARA 800PX OU MENOS }

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

Sobre Matheus Pereira

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

Contato

Vamos bater um papo, preencha os campos seguintes ou escolha outras formas de entrar em contato!

Estarei à disposição para o que e quando precisar.

contato@matheusp.com.br

São José do Rio Preto - SP

17 99133.8940

logotipo matheus pereira rodapé

Matheus Pereira

Desenvolvedor no mercado desde 2012, com foco em criação de sites, mídias sociais e otimização de SEO!