Como Criar Websites Responsivos

Como Criar Websites Responsivos

Um Desenvolvedor Web decente sabe que, hoje em dia, qualquer website que desenvolver terá que ser responsivo. É inevitável… Aliás é inaceitável que não seja assim, uma vez que, cada vez mais os utilizadores da internet o fazem em dispositivos diferentes. É, por isso, imprescindível que o site tenha um layout capaz de dar resposta a cada um desses dispositivos, fazendo com que o conteúdo se ajuste.

Já vos falei do Bootstrap que pode ser uma boa ferramenta para isto, mas hoje trago-vos outra solução.

Para começar a criar um website responsivo há que utilizar a regra @media. O chamado media query.

@media screen and (max-width: 600px) {

                .class-name {

                               background-color: lightblue;

                }

}

Este CSS determina que se a janela tiver 600px ou menos, a cor de fundo do elemnto .class-name será azul (lightblue).

O que é um media query?

Um media query é uma funcionalidade do CSS3 que faz com que a página adapte o seu layout a diferentes tamanhos de ecrã e tipo de media.

Alguns exemplos

Ecrãs com mais de 1024px - Normalmente Desktop

@media screen and (max-width: 1024px) {

}

Ecrãs com mais de 768px mas menos de 1023xp - Tablets

@media screen and (max-width: 768px)

and (max-width:1023px) {

}

Ecrãs com menos de 767px – Smartphones

@media screen and (max-width: 767px) {

}

Estes exemplos resolvem tudo?!

Depende. Estes são apenas 3 exemplos, mas a verdade é que todos os dispositivos têm tamanhos e resoluções diferentes.

A melhor forma de criar páginas responsivas é ir redimensionando a janela do site em que estamos a trabalhar até que algum do conteúdo do mesmo comece a “quebrar” e ficar fora do lugar. É então que inserimos o breakpoint que queremos para corrigir o problema.

View this post on Instagram

Um Desenvolvedor Web decente sabe que, hoje em dia, qualquer website que desenvolver terá que ser responsivo. É inevitável… Aliás é inaceitável que não seja assim, uma vez que, cada vez mais os utilizadores da internet o fazem em dispositivos diferentes. É, por isso, imprescindível que o site tenha um layout capaz de dar resposta a cada um desses dispositivos, fazendo com que o conteúdo se ajuste. Já vos falei do Bootstrap que pode ser uma boa ferramenta para isto, mas hoje trago-vos outra solução. . . . . #css #developer #codelife #css3#devlife #html #html5 #coder #webdev #webdeveloper #ux #softwaredevelopment #responsive #peoplewhocode #frontenddeveloper #buildtheweb #webdevelopers #uidesigner #htmlcss #cssgrid #website #websitedesign #websitedesigner #websitedevelopment #codeismylife #htmlcoding #freelancer #freelancerlife #freelancerbrasil #formador

A post shared by Sérgio Martins (@xgaizkax) on

Marcações: CSS, Web Design, html, programação, html5

Comentários

Construído com HTML5, CSS3 e todas essas cenas - Copyright © 2018 Sérgio Martins

Download Freewww.bigtheme.net/joomla Joomla Templates Responsive