Portfólio responsivo: adaptando sua página para celular, tablet e desktop
Aprenda a adaptar o portfólio para celular, tablet e desktop usando media queries, ajustes de menu, hero, grids, cards e espaçamentos.
Trilha: Projeto Portfólio Profissional
Este conteúdo é a Parte 4 de 6 da trilha Projeto Portfólio Profissional. Acompanhe o hub da trilha: /projetos/criar-portfolio-profissional
Nas partes anteriores, criamos a estrutura HTML, aplicamos o visual com CSS e adicionamos interações com JavaScript. Agora vamos adaptar a página para funcionar melhor em celular, tablet e desktop.
Introdução
Responsividade é a capacidade de uma página se ajustar ao tamanho da tela sem quebrar o layout. Um portfólio pode ficar bonito no computador, mas se o menu, os cards ou os botões ficarem apertados no celular, a experiência deixa de parecer profissional.
Nesta etapa, vamos trabalhar com ajustes simples e práticos: containers flexíveis, imagens que não estouram a tela, grids que mudam de coluna e media queries para controlar o layout em telas menores.
Conferindo o viewport no HTML
Antes de mexer no CSS, confira se o HTML tem a tag viewport dentro do head. Ela avisa ao navegador que a largura da página deve acompanhar a largura real do dispositivo.
<!-- Viewport: faz o layout respeitar a largura real do celular e do tablet. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Sem essa tag, o navegador pode renderizar a página como se ela estivesse em uma tela grande e apenas encolher tudo. Isso costuma deixar textos pequenos e áreas difíceis de tocar no celular.
Deixando imagens e containers flexíveis
O primeiro cuidado é impedir que imagens e blocos ultrapassem a largura da tela. Também vale manter um container central com largura máxima para o desktop e respiro lateral para telas menores.
/* Base responsiva: impede estouros laterais e mantém o conteúdo confortável. */
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.container {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
}A função min ajuda o container a ter um limite no computador, mas sem ultrapassar a tela no celular. O calc cria uma margem lateral simples de 16px de cada lado.
Ajustando o menu
No desktop, o menu pode ficar horizontal. Em telas menores, os links precisam ganhar uma área própria para não ficarem espremidos. Se você seguiu a Parte 3, o JavaScript já controla a classe active.
/* Menu mobile: esconde os links até o botão abrir a navegação. */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-links {
position: absolute;
top: 72px;
left: 16px;
right: 16px;
display: none;
flex-direction: column;
gap: 12px;
padding: 16px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--shadow);
}
.nav-links.active {
display: flex;
}
.nav-links a {
width: 100%;
padding: 10px 12px;
}
}Esse bloco mantém o topo organizado em telas pequenas. O menu só aparece quando a classe active é adicionada pelo JavaScript.
Adaptando a seção inicial
A hero section normalmente usa duas colunas no desktop: texto de um lado e imagem do outro. No celular, o ideal é empilhar os blocos para preservar leitura e toque.
/* Hero em telas médias: reduz o impacto visual sem desmontar a composição. */
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 112px;
text-align: center;
}
.hero-actions {
justify-content: center;
}
.hero-image {
max-width: 360px;
margin: 0 auto;
}
}
/* Hero no celular: textos menores, botões empilháveis e menos espaço vertical. */
@media (max-width: 560px) {
.hero {
min-height: auto;
padding-top: 96px;
padding-bottom: 48px;
}
.hero h1 {
font-size: 2.25rem;
line-height: 1.1;
}
.hero p {
font-size: 1rem;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
}
}Observe que não mudamos o HTML. A mesma estrutura continua funcionando, mas o CSS reorganiza a apresentação conforme o espaço disponível.
Adaptando grids e cards
Cards de habilidades e projetos ficam bons em três colunas no desktop, mas precisam reduzir para duas colunas no tablet e uma coluna no celular.
/* Tablet: reduz grids para duas colunas quando três colunas começam a apertar. */
@media (max-width: 900px) {
.skills-grid,
.projects-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Celular: cada card ocupa uma linha para leitura mais limpa. */
@media (max-width: 640px) {
.skills-grid,
.projects-grid,
.about-grid {
grid-template-columns: 1fr;
}
.card,
.project-card {
padding: 20px;
}
}O minmax(0, 1fr) ajuda a evitar que textos longos empurrem o grid para fora da tela. Esse detalhe é simples, mas resolve muitos layouts quebrados.
Ajustando seções, contato e rodapé
Além da hero e dos cards, revise espaçamentos gerais. Em telas menores, seções muito altas fazem o usuário rolar demais antes de chegar ao conteúdo.
/* Espaçamentos menores: deixa a página mais direta em telas pequenas. */
@media (max-width: 640px) {
section {
padding: 56px 0;
}
.section-title {
font-size: 1.85rem;
}
.contact-box {
padding: 24px;
}
.footer-content {
flex-direction: column;
gap: 12px;
text-align: center;
}
}A ideia não é deixar tudo pequeno demais. O objetivo é tirar excessos de altura, manter leitura confortável e fazer botões e links continuarem fáceis de tocar.
CSS completo desta etapa
Abaixo está um bloco completo de responsividade para adicionar no final do style.css. Colocar no final ajuda essas regras a sobrescreverem os estilos de desktop quando a tela for menor.
/* Base responsiva: evita barra lateral e deixa mídias fluírem dentro da tela. */
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.container {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
}
/* Tablet: reorganiza hero e grids quando o espaço horizontal fica menor. */
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 112px;
text-align: center;
}
.hero-actions {
justify-content: center;
}
.hero-image {
max-width: 360px;
margin: 0 auto;
}
.skills-grid,
.projects-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Menu mobile: transforma a navegação em painel vertical controlado pelo JavaScript. */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-links {
position: absolute;
top: 72px;
left: 16px;
right: 16px;
display: none;
flex-direction: column;
gap: 12px;
padding: 16px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--shadow);
}
.nav-links.active {
display: flex;
}
.nav-links a {
width: 100%;
padding: 10px 12px;
}
}
/* Celular: reduz alturas, empilha cards e mantém botões confortáveis para toque. */
@media (max-width: 640px) {
section {
padding: 56px 0;
}
.section-title {
font-size: 1.85rem;
}
.skills-grid,
.projects-grid,
.about-grid {
grid-template-columns: 1fr;
}
.card,
.project-card,
.contact-box {
padding: 20px;
}
.footer-content {
flex-direction: column;
gap: 12px;
text-align: center;
}
}
/* Celular pequeno: simplifica a hero para leitura rápida e botões em largura total. */
@media (max-width: 560px) {
.hero {
min-height: auto;
padding-top: 96px;
padding-bottom: 48px;
}
.hero h1 {
font-size: 2.25rem;
line-height: 1.1;
}
.hero p {
font-size: 1rem;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
}
}Próximo passo da trilha
Agora o portfólio já tem estrutura, visual, interações e responsividade inicial. A próxima parte é transformar o modelo genérico em um portfólio seu, com textos, links e projetos reais.
A Parte 5 está disponível na URL /projetos/portfolio-personalizar-conteudo. Nela, vamos trocar conteúdos genéricos e inserir links de GitHub, LinkedIn, e-mail, currículo, projetos publicados e repositórios.