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
28 anos, paulistano, desenvolvedor back-end e graduado em tecnologia da informação. Adoro músicas, jogos eletrónicos e sou completamente apaixonado pelo mundo digital.Posts Relacionados
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 como definir algumas configurações ou como bloquear acesso dos robôs dos sites de buscando utilizando o robots.txt
O PNG PIX é um banco de imagens grátis, com inúmeras imagens com seus fundos transparentes. O sonho de todo designer