Como fazer um site responsivo em tela cheia

Ryan Cullum Blocked Unblock Seguir Seguindo 5 de janeiro

Introdução

Se você está começando com CSS ou se é um veterinário experiente, provavelmente já percebeu que os elementos de posicionamento para colocá-los no lugar certo nem sempre foram fáceis. Talvez você tenha tido problemas em dimensionar seu conteúdo em um site. Seja qual for o caso, a criação de um website em tela cheia consiste em usar as unidades apropriadas e uma tecnologia chamada CSS Flexbox.

Neste tutorial, focaremos no Flexbox e na unidade vh para criar um belo site minimalista. Um exemplo do nosso produto final está abaixo.

[codepen_embed height = ”436" theme_id = "0" slug_hash = ”wRPoXQ" default_tab = "html, resultado" user = "racullum"] Veja a seção Pen Full Paged HTML da Racullum ( @racullum ) no CodePen . [/ codepen_embed]

Então, vamos dividir nosso site em três partes:

Etapa 1: crie um esqueleto HTML.
Etapa 2: Esqueleto HTML de estilo.
Passo # 3: Amplie nossas seções HTML para tela cheia.

Etapa 1: criar um esqueleto HTML

Primeiro, precisamos descobrir como será a estrutura. Eu optei por cada cor para estar em sua própria seção. Na realidade, você poderia envolver sua página "Sobre" em uma seção e sua página "Missão" em outra. Por exemplo, vamos nos ater apenas às nossas 7 cores do arco-íris.

Para cada cor, começaremos com uma seção que envolve uma div e duas classes de cabeçalho, uma para o nome da cor e outra para os atributos da cor.
Igual a …

<html>
<body>
<section style = ”background: # f44336;”>
<div class = ”red”>
<h1> Vermelho </ h1>
<h3> Excitação. Energia. Paixão. </ H3>
</ div>
</ section>
</ body>
</ html>

Crie mais seis seções para as próximas seis cores do arco-íris. Você deve acabar com algo que se parece com isso …

Etapa 2: Esqueleto HTML de Estilo

Agora que temos a estrutura geral do nosso documento HTML, precisamos dar um pequeno estilo.

Primeiro, darei a folha de estilo e depois explico o que fiz.

Vamos pegar esse elemento por elemento …

 body { 
margem: 0;
preenchimento: 0;
}
 Definir a margem e o preenchimento como 0 garante que a cor de fundo de cada seção possa ocupar o máximo de espaço possível! 
 h1 { 
tamanho da fonte: 10vw;
cor: #ffffff;
preenchimento esquerdo: 7vw;
margem-fundo: 0;
}
 Basta adicionar um preenchimento ao lado esquerdo do nome da cor e eliminar a margem na parte inferior para que possamos ter um subtítulo claro sob o nome da cor. 
 Tamanho da fonte é um produto da largura da porta de exibição. Uma ótima maneira de tornar os elementos de cabeçalho responsivos. 
 h3 { 
margem superior: 0;
preenchimento esquerdo: 7vw;
cor: #ffffff;
}
 Igual ao nosso elemento h1, apenas movendo-o um pouco e certificando-se de que o texto é agradável e aconchegante ao lado do nome da nossa cor 

Etapa # 3: amplie nossas seções HTML para tela inteira

Então agora chegamos à carne do nosso tutorial. Atualmente, temos apenas os elementos da seção ocupando o espaço necessário para o conteúdo e é isso. O que precisamos fazer é utilizar o CSS Flexbox. Flexbox nos permitirá dispor as seções na ordem muito parecida com livros empilhados. Usando a opção 'display: flex' em nossa folha de estilos, podemos forçar os elementos dentro da seção a seguir a filosofia do Flexbox CSS. Siga este guia para obter uma visão detalhada do Flexbox. Adicionando 'display: flex' como assim…

 seção { 
exibição: flex;
}

agora eliminará todo o espaço em branco no documento. Ainda não terminamos! Precisamos adicionar mais um atributo à folha de estilo para que as seções de cores ocupem toda a tela. Para isso, usaremos a unidade de comprimento relativo 'vh' . 'vh' significa altura da janela de visualização e é relativo a 1% da altura da janela de visualização. Então, se adicionarmos 'height: 101vh' ao elemento de seção em nossa folha de estilos, veremos agora que nossas seções de cores ocupam toda a tela…

Mais uma coisa …

Páginas web em tela cheia são legais e tudo mais, mas vamos dar um passo além e deixar nosso site responsivo!

O design responsivo deve estar sempre no fundo de sua mente, especialmente agora que vivemos em um mundo em primeiro lugar. Nosso site pode ficar bem em um desktop, mas ele fica ótimo em um telefone celular?

Com as consultas de mídia, podemos garantir que tenhamos um design inteligente para todos os tipos de dispositivos. Pense em uma consulta de mídia como um ponto de interrupção quase como o teste de altura para passeios justos. Se você tiver mais de uma certa altura, terá uma experiência, enquanto as crianças mais curtas ganharam outra. Vamos adicionar uma consulta de mídia que diz que, se um dispositivo tiver uma largura de até 600px, reorganize os elementos de maneira mais legível…

 @media apenas screen e (max-width: 600px) 
{
seção {
alinhar itens: centro! importante;
}
h1 {
top de preenchimento: 0! importante;
}
}

Depois de adicionar isso à folha de estilo, você agora terá seu produto acabado …

Parabéns!

Tudo bem! Espero que agora você tenha o conhecimento para implementar páginas de tela cheia em seu próprio site. Espero que este tutorial tenha sido benéfico para você e você tenha algo a partir disso. Deixe quaisquer comentários ou sugestões para este tutorial que você tem!