WEB DESIGN RESPONSIVO DO HTML
Web design responsivo é a criação de página da web para boa
aparência em todos os dispositivos.
CONFIGURAR AS PÁGINAS DA WEB PARA ABRIR EM QUALQUER DISPOSITIVOS.
META tag em todas as páginas do site.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Página responsivo</h2>
<p>Página configurada para abrir em qualquer dispositivo.
</p>
</body>
</html>
IMAGENS RESPONSIVAS
Imagens responsivas
se adapta a qualquer tamanho de navegador.
Width deve se definido como 100% usando css.
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<h2>Imagens
responsivas</h2>
<img
src="imagem.jpg" style="width:100%;">
</body>
</html>
PARA QUE A IMAGEM NÃO
FIQUE MAIOR QUE A ORIGNAL.USE max-width
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<h2>imagens
responsivase</h2>
<p>"max-width:100%"
</p>
<img
src="imagem.jpg" style="max-width:100%;height:auto;">
</body>
</html>
Mostrar imagens diferentes
dependendo da largura do navegador
<picture>permite definir diferentes imagens para diferentes tamanhos
de janela do navegador.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Mostrar imagens diferentes dependendo da largura do
navegador</h2>
<picture>
<source
srcset="img_imagem.jpg" media="(max-width: 600px)">
<source
srcset="img_imagem.jpg" media="(max-width: 1500px)">
<source
srcset="imagem.jpg">
<img
src="img_imagem.jpg" alt="imagem"
style="width:auto;">
</picture>
</body>
</html>
Tamanho de texto responsivo
Tamanho do texto de definido pela unidade “vw” "largura da janela de visualização".
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw;">Texto
responsivo</h1>
<p style="font-size:5vw;">Texto
responsivo</p>
<p style="font-size:5vw;"> Texto
responsivo.</p>
<p>Viewport é o tamanho da janela do navegador. 1vw =
1% da largura da janela de visualização. Se a janela de visualização tiver 50
cm de largura, 1vw é 0,5 cm.</p>
</body>
</html>
Viewport é o tamanho da
janela do navegador. 1vw = 1% da largura da janela de visualização. Se
a janela de visualização tiver 50 cm de largura, 1vw é 0,5 cm.
Consultas de mídia
redimensione a janela do
navegador para ver que os três elementos div abaixo serão exibidos
horizontalmente em telas grandes e empilhados verticalmente em telas pequenas:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:
border-box;
}
.esquerdo {
background-color:
#255555;
padding: 20px;
float: left;
width: 20%; /*
width 20% */
}
.menu {
background-color:
#f1f1f1;
padding: 20px;
float: left;
width: 60%; /*
width 60% */
}
.direita {
background-color:
#04AA6D;
padding: 20px;
float: left;
width: 20%; /*
widht 20% */
}
/* usa media 800px */
@media screen and (max-width: 800px) {
.esquerdo, .menu,
.direita {
width: 100%; /*
width 100% */
}
}
</style>
</head>
<body>
<h2>media</h2>
<p>Navegador </p>
<p>box 800px.</p>
<div class="esquerdo">
<p>Menu
Esquerdo </p>
</div>
<div class="menu">
<p>menu
principalt</p>
</div>
<div class="direita">
<p>Menu
direita</p>
</div>
</body>
</html>
PÀGINA COMPLETA
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
text-align: center;
}
.menu a {
background-color: #e5e5e5;
padding: 8px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
.right {
background-color: #e5e5e5;
float: left;
width: 20%;
padding: 15px;
margin-top: 7px;
text-align: center;
}
@media only screen and (max-width: 620px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Ariel;color:#404040;">
<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
<h1>TÍTULO DA PÁGINA</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div class="main">
<h2>CONTÉUDO DA PÁGINA</h2>
<p> Minha primeira página</p>
</div>
<div class="right">
<h2>seja bem vindo</h2>
<p>Contéudo da direita.</p>
</div>
</div>
<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright 5internet.com.br</div>
</body>
</html>