Publicado em

As 3 Meta Tags Essenciais para o Design Responsivo

metatags-design-responsivoVocê já deve ter visto na marcação de alguns sites (principalmente os que usam Bootstrap) que tem alguns itens de HTML5 e meta tags.

Vamos entender alguns desses itens, que são essenciais para obter um design responsivo, e devem estar em cada página do website:


O DOCTYPE

<!DOCTYPE html>

Este é o DOCTYPE. Vários frameworks precisam ter a marcação em HTML5 para exibir tudo corretamente.

O Charset

<meta charset="utf-8">

Esta tag indica ao browser que estamos usando o conjunto de caracteres Unicode, para exibir acentos e cedilha, por exemplo.


Lidando com o IE

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Esta tag força o IE a usar as definições de CSS mais recentes, e evita que ele quebre o visual, no Modo de Compatibilidade.


O Viewport

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

A tag de viewport faz o site ocupar todo o espaço disponível na janela, seja em celulares, tablets ou PC’s. É a tag mais importante.


Exemplo Completo

Vamos ver um exemplo completo dessas tags aplicadas em uma página com Bootstrap: