Sites responsivos com CSS Media Queries e Viewport

20.05.2015 | Tutoriais | 103 visitas

Imagem - Sites responsivos com CSS Media Queries e Viewport

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.

CARREGANDO