Design de site responsivo em HTML

Neste artigo, discutiremos a capacidade de resposta do HTML . Ter um design ou layout de site responsivo significa que o conteúdo é visível em todos os dispositivos, tornando o site elegante, não importa qual dispositivo esteja sendo usado!

Adaptar-se a diferentes tamanhos de tela e navegadores faz parte de um web design responsivo.

Índice-

Design de site responsivo em HTML:
O que é Html Responsive Web Design?:
Configurando a janela de visualização:
Imagens responsivas:
Propriedade de largura da imagem:
Propriedade de largura máxima:
Tamanho do texto responsivo:

Olá Mundo:

Consultas de mídia:
Página Web Responsiva – Mr Exemplos:
Inicialização:
Exemplo de inicialização:
Vantagens do design de site responsivo em HTML:

O que é Web Design Responsivo Html?

HTML e CSS são usados no design da Web responsivo para redimensionar, ocultar, encolher ou ampliar sites para torná-los adequados e visíveis para todos os dispositivos (TV, desktops, tablets e telefones celulares):

Você pode ver a aparência do design responsivo para todos os dispositivos na imagem abaixo:

Configurando a Janela de Visualização

Se você deseja que seu site seja responsivo, adicione a seguinte tag <meta> a todas as suas páginas usando HTML responsivo:

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Com o código de exemplo acima, você pode instruir os navegadores da Web sobre como controlar as dimensões e o dimensionamento de sua página definindo a janela de visualização de sua página da Web.

No exemplo abaixo, a tag viewport <meta> foi arrastada de uma página da web, mas a mesma página da web foi adicionada:

Meta tag sem viewport:

Meta tag com viewport:

Observação: você pode clicar nos dois links acima se estiver navegando em um telefone ou tablet para ver a diferença e verificar sua capacidade de resposta.

Imagens responsivas

Uma imagem responsiva é uma imagem que pode ser dimensionada para caber em qualquer tamanho do navegador ou tamanho da tela.

Propriedade de largura da imagem

Definir 100% para a propriedade de largura do CSS tornará a imagem abaixo responsiva e permitirá que ela aumente e diminua de acordo com os tamanhos de tela.

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/img_boy.jpg" style="width:100%;">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A imagem no exemplo acima pode ser ampliada para ser maior do que seu tamanho original. Na maioria das vezes, usar largura máxima será uma solução mais adequada .

Propriedade de largura máxima

Max-width define a largura máxima da imagem para 100%, o que significa que ela sempre será reduzida para caber, mas nunca aumentará mais do que sua largura original:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/HTML-responsive-2-scaled.jpg" style="max-width:100%; height:auto;">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo de uso da propriedade max-width para layout responsivo para que você possa aprender mais sobre isso:

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head><body>
<h2>Responsive Image</h2>
<p>"max-width:100%" This ensures that the image will not grow larger than its original size and is also responsive.</p>
<p>To see the results, resize the browser window.</p>
<img src="https://mrexamples.com/wp-content/uploads/2023/03/HTML-responsive-2-scaled.jpg%20" style="max-width:100%;height:auto;">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Mostrar imagens diferentes dependendo da largura do navegador

O tamanho dinâmico da imagem pode ser especificado para cada dimensão da janela do navegador usando o elemento HTML <picture> .

Veja a imagem abaixo conforme varia em largura, redimensionando a janela do navegador:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<picture>
<source srcset="https://mrexamples.com/wp-content/uploads/2023/03/flower-scaled.jpg" media="(max-width:200px)">
<source srcset="https://mrexamples.com/wp-content/uploads/2023/03/flower-scaled.jpg" media="(max-width:400px)">
<source srcset="https://mrexamples.com/wp-content/uploads/2023/03/flower-scaled.jpg">
<img src="https://mrexamples.com/wp-content/uploads/2023/03/flower-scaled.jpg" alt="Flowers">
</source></source></source></picture>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tamanho de texto responsivo

O tamanho do texto responsivo HTML pode ser definido com uma unidade “ vw ” (largura da janela de visualização). Isso garantirá que o tamanho do texto obedeça ao tamanho da janela do navegador:

Olá Mundo

Tente redimensionar a janela do navegador para ver como o tamanho do texto abaixo varia.

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:10vw">Hello World</h1>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo de tamanho de fonte responsivo:

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head><body>
<h1 style="font-size:12vw;">The size is 12vw here.</h1>
<p style="font-size:8vw;">The size is 8vw here.</p>
<p style="font-size:6vw;">The size is 6vw here.</p>
<p>Resize your window to view the difference .</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Lembrete: A viewport calcula o tamanho da janela do navegador. 1vw é equivalente a 1% da largura da viewport. Nesse caso, 1vw é igual a 0,5 cm, pois a janela de visualização tem 50 cm de largura.

Consultas de mídia

Consultas de mídia também são comumente utilizadas em páginas da Web responsivas , além de redimensionar texto e imagens.

Vários estilos podem ser expressos com base no tamanho do navegador com consultas de mídia.

Você pode verificar isso redimensionando a janela do navegador para que os três elementos div abaixo sejam retratados horizontalmente em telas grandes e verticalmente em telas pequenas:

Conteúdo principal

conteúdo certo

Example:

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><style><br>* {<br> box-sizing: border-box;<br>}<br><br>.left {<br> background-color: #2196F3;<br> padding: 20px;<br> float: left;<br> width: 20%; /* The width is 20%, by default */<br>}<br><br>.main {<br> background-color: #f1f1f1;<br> padding: 20px;<br> float: left;<br> width: 60%; /* The width is 60%, by default */<br>}<br><br>.right {<br> background-color: #04AA6D;<br> padding: 20px;<br> float: left;<br> width: 20%; /* The width is 20%, by default */<br>}<br><br>/* Use a media query to add a break point at 800px: */<br>@media screen and (max-width: 800px) {<br> .left, .main, .right {<br> width: 100%; /* The width is 100%, when the viewport is 800px or smaller */<br> }<br>}<br></style><br><br><br><br><h2>Media Queries</h2><br><p>Resize the browser window.</p><br><br><p>Make sure you reach the breakpoint at 800px when resizing this frame.</p><br><br><div class="left"><br> <p>Left Menu</p><br></div><br><br><div class="main"><br> <p>Main Content</p><br></div><br><br><div class="right"><br> <p>Right Content</p><br></div><br><br><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Nota: Lendo nossa próxima lição RWD , você pode entender mais sobre Media Queries e Responsive Web Design.

Página Web Responsiva – Mr Exemplos

Telefones celulares e telas grandes de desktop devem exibir bem em páginas da web responsivas.

Dica: Você está familiarizado com os serviços mrexamples ? A hospedagem do site está disponível aqui. Crie seu site do zero ou use um modelo.

Bootstrap

O Bootstrap é um dos frameworks CSS mais famosos. As páginas da Web responsivas em HTML são criadas com Bootstrap usando HTML, CSS e jQuery.

Bootstrap Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mr-Example Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body><div class="container">
<div class="mrxsite">
<h1>Mr-example bootstrap testing heading</h1></div>
<div class="row">
<div class="col-sm-4">
…</div>
<div class="col-sm-4">…
</div>
<div class="col-sm-4">
…
</div></div>
</div></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Outro exemplo de uso de bootstap em nosso código com botões:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Mr-Example Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-warning">Warning</button>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Observação: ensinaremos melhor sobre Bootstrap em nossas próximas lições de Bootstrap .

Vantagens do design de site responsivo em HTML

A seguir estão as vantagens do design de site responsivo em HTML:

Experiência de usuário aprimorada: o design responsivo garante uma experiência de usuário perfeita em diferentes dispositivos, levando a um maior envolvimento, visitas mais longas ao site e taxas de conversão mais altas.

SEO aprimorado: o design responsivo do site pode melhorar as classificações do mecanismo de pesquisa do seu site, proporcionando uma melhor experiência do usuário.

Custo-benefício: um design de site responsivo permite que você tenha um único site que se adapta a diferentes dispositivos, reduzindo os custos de desenvolvimento e manutenção.

Manutenção simplificada: um design de site responsivo requer apenas um site para atualizar, tornando a manutenção e as atualizações mais eficientes.

À prova de futuro: o design responsivo do site pode se adaptar a novos dispositivos com tamanhos e resoluções de tela variados, garantindo uma experiência de usuário consistente.

Deixe-nos saber sobre sua opinião sobre este artigo, deixando sua reação abaixo.

Nós valorizamos o seu feedback.

Design de site responsivo em HTML

O que é Web Design Responsivo Html?

Configurando a Janela de Visualização

Example

Meta tag sem viewport:

Meta tag com viewport:

Imagens responsivas

Propriedade de largura da imagem

Example

Propriedade de largura máxima

Example

Example:

Mostrar imagens diferentes dependendo da largura do navegador

Example

Tamanho de texto responsivo

Olá Mundo

Example

Example:

Consultas de mídia

Example:

Página Web Responsiva – Mr Exemplos

Bootstrap

Bootstrap Example:

Example:

Vantagens do design de site responsivo em HTML

Sentindo entediado?