Como Deixar o Site Responsivo com CSS | Hoje, um site não deve ficar bem apenas em uma tela de desktop, mas também em tablets e smartphones. Um website é responsivo se ele for capaz de se adaptar à tela do cliente. Veja mais detalhes no Good Year EP.
Como Deixar o Site Responsivo com CSS
Neste artigo, vou mostrar como fazer um website responder facilmente em três etapas fáceis.
1 – Layout
Quando se constrói um site de internet com capacidade de resposta, ou quando se faz um site já existente, o primeiro elemento a ser analisado é o layout.
Quando construo sites responsivos, sempre começo por criar um layout não-responsivo, fixado no tamanho padrão. Quando estou satisfeito com a versão não-responsiva, eu adiciono consultas de mídia e pequenas alterações ao meu código para tornar o código responsivo. É muito mais fácil focar em uma tarefa de cada vez.
Quando terminar seu site não-responsivo, a primeira coisa a fazer é colar as seguintes linhas dentro das tags e em sua página html. Isto ajustará a visualização em todas as telas a uma proporção 1×1 e removerá a funcionalidade padrão dos iPhones e outros navegadores de smartphone que tornam os sites em visualização total e permitem aos usuários ampliar o layout.
Agora é hora de acrescentar algumas perguntas da mídia. De acordo com o site do W3C, uma consulta de mídia consiste em um tipo de mídia e zero ou mais expressões que verificam as condições de determinadas características da mídia.
Ao utilizar consultas de mídia, as apresentações podem ser adaptadas a uma gama específica de dispositivos de saída sem alterar o conteúdo em si. Em outras palavras, as consultas de mídia permitem que seu site tenha boa aparência em todos os tipos de displays, desde smartphones até telas grandes.
As consultas de mídia dependem do layout de seu website, por isso é meio difícil para mim fornecer-lhe um trecho de código pronto para uso.
Como já disse, você provavelmente terá que adaptar este código um pouco para atender às necessidades específicas de seu website. Cole-o no arquivo .css de seu site.
2 – Mídias
Um layout responsivo é o primeiro passo para um site totalmente responsivo. Agora, vamos nos concentrar em um aspecto muito importante de um site moderno: as mídias, como vídeos ou imagens.
O código CSS garantirá que suas imagens nunca serão maiores do que o contêiner pai. É super simples e funciona para a maioria dos websites. Observe que a diretiva de largura máxima não é reconhecida por navegadores mais antigos, como o IE6. Para funcionar, este trecho de código tem que ser inserido em sua folha de estilo CSS.
3 – Tipografia
O último passo deste tutorial é definitivamente importante, mas muitas vezes é negligenciado pelos desenvolvedores quando se trata de websites responsivos: Tipografia.
Até agora, a maioria dos desenvolvedores (inclusive eu!) usava pixels para definir o tamanho das fontes. Embora os pixels estejam ok quando seu website tem uma largura fixa, um website responsivo deve ter uma fonte responsiva. De fato, um tamanho de fonte responsiva deve estar relacionado à largura de seu contentor pai, para que possa se adaptar à tela do cliente.
A especificação CSS3 incluiu uma nova unidade chamada rems. Eles funcionam de forma quase idêntica à unidade em, mas são relativos ao elemento html, o que os torna muito mais fáceis de usar do que os rems.
Agora que você sabe como deixar o site responsivo com css, deixe seu comentário e veja outros artigos de wordpress e programação.
