Vamos lá, galera, vamos começar de forma rápida, prática, focando ao máximo no entendimento claro sobre tudo que vamos tratar nesse blog.
Antes de pensar em fazer qualquer código que foque em design responsivo, é necessário entender sobre os tipos de pixels que existem e com os quais vamos trabalhar.
Em resumo, existem basicamente três tipos de pixels:
1 - Pixel do dispositivo: é a quantidade de pixels físicos da tela. Tomemos como exemplo o Samsung Galaxy S5 (que vamos usar nos nossos exemplos), que na vertical tem 360 pixels, e na horizontal fica com 640 pixels.
2 - CSS Pixel: é a medica que usamos no CSS para falarmos o tamanho dos objetos no nosso site. Por exemplo, se no código colocarmos "width: 10px;" estamos dizendo que o objeto que tiver essa propriedade terá 10 CSS pixels.
3 - DPI (dots per inch) Pixel: em resumo, é a quantidade de pixels que cabem em uma polegada, assim temos a possibilidade de termos resoluções maiores em telas que podem ter o mesmo tamanho físico.
Os únicos pixels que vamos precisar para os nossos exemplos são os pixels do dispositivo, e o CSS pixel, e isso é importante para tratarmos do nosso primeiro e importantíssimo tópico: a meta tag "viewport". Veja o exemplo abaixo:
<meta name="viewport" content="width=device-width">
Viewport é, em resumo, a parte visível da sua tela. Num computador ou desktop, por exemplo, o viewport é do tamanho da tela do navegador, ou seja, se você redimensionar a janela do navegador, o viewport é diminuído. Entretanto, em dispositivos móveis nós não conseguimos redimensionar o tamanho da tela, eles sempre abrem ocupando o espaço total da tela. Com a tag que indicamos acima, nós definimos a viewport do site com a largura (width) igual a largura do dispositivo (device-width). Isso permite ao nosso site ter a viewport definida de acordo com o dispositivo que abrimos o site, além dela se adaptar conforme redimensionamos o navegador no desktop, ou se viramos o celular ou tablet na vertical ou na horizontal.
A tag viewport é muito útil quando trabalhada junto com as media queries, que serão discutidas no próximo post.
Fonte: http://tableless.com.br/manipulando-metatag-viewport/
Nenhum comentário:
Postar um comentário