tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

Web Design Responsive - O Viewport


O que é a janela de exibição?

A janela de visualização é a área visível do usuário de uma página web.

A janela de visualização varia de acordo com o dispositivo, e será menor em um telefone móvel do que num monitor de computador.

Antes de tablets e telefones celulares, páginas web foram projetados apenas para telas de computador, e era comum para páginas da web para ter um design estático e um tamanho fixo.

Então, quando começamos a navegar na internet usando tablets e telefones celulares, páginas da Web tamanho fixo eram grandes demais para caber na janela de exibição. Para corrigir isso, os navegadores nesses dispositivos escalados para baixo toda a página web para caber na tela.

Este não era perfeito !! Mas uma solução rápida.


Definir a janela de exibição

HTML5 introduziu um método para deixar web designers ter controle sobre o visor, através do <meta> tag.

Você deve incluir o seguinte <meta> elemento janela de exibição em todas as suas páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Um <meta> elemento janela dá as instruções do navegador sobre como controlar dimensões e escalonamento da página.

A width=device-width parte define a largura da página, para seguir a tela de largura do dispositivo (que irá variar dependendo do dispositivo).

A initial-scale=1.0 parte define o nível de zoom inicial, quando a página é carregada pela primeira vez pelo navegador.

Aqui está um exemplo de uma página web sem a tag meta viewport, e na mesma página da web com a meta tag viewport:

Dica: Se você estiver navegando essa página com um telefone ou um tablet, você pode clicar sobre os dois links para ver a diferença.



Tamanho conteúdo para a janela

Os usuários são usados ​​para rolar sites verticalmente no desktop e dispositivos móveis - mas não na horizontal!

Assim, se o usuário é forçado a rolar horizontalmente, ou diminuir o zoom, para ver toda a página web que resulta em uma má experiência do usuário.

Algumas regras adicionais a seguir:

1. Não utilize grandes elementos de largura fixa - Por exemplo, se uma imagem é exibida em uma largura maior do que a janela de exibição pode causar a janela de exibição para rolar horizontalmente. Lembre-se de ajustar esse conteúdo para caber dentro da largura da janela.

2. Não deixe que o teor de contar com uma largura viewport especialmente para tornar bem - Desde dimensões da tela e largura em pixels CSS variam amplamente entre os dispositivos, o conteúdo não deve contar com uma largura viewport especialmente para tornar bem.

3. consultas de mídia Use CSS para aplicar estilo diferente para pequenas e grandes telas - Definir grandes larguras de CSS absolutos de elementos de página, fará com que o elemento a ser muito grande para a janela de exibição em um dispositivo menor. Em vez disso, considere o uso de valores de largura relativos, como width: 100%. Além disso, ter o cuidado de usar grandes valores de posicionamento absoluto. Pode fazer com que o elemento a cair fora da janela de exibição em dispositivos pequenos.