AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

Diseño Web Responsive HTML


Next Page >>
HTML images

Tutorial HTML » Diseño Web Responsive HTML

¿Qué es el diseño web adaptable?

El diseño web receptivo es el enfoque que sugiere que el diseño y el desarrollo deben responder al comportamiento y al entorno del usuario en función del tamaño de la pantalla, la plataforma y la orientación.

La práctica consiste en una combinación de cuadrículas y diseños flexibles, imágenes y un uso inteligente de consultas de medios CSS. A medida que el usuario cambia de su computadora portátil a iPad, el sitio web debe cambiar automáticamente para adaptarse a la resolución, el tamaño de la imagen y las capacidades de creación de scripts.

 

Imágenes receptivas - ejemplo

Para crear un sitio web receptivo, agregue la siguiente etiqueta <meta> a todas sus páginas web:

Example: Configuración de la ventana gráfica
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Usando la propiedad de ancho
Si la propiedad de ancho de CSS se establece en 100%, la imagen responderá y se escalará hacia arriba y hacia abajo:

El diseño web receptivo se trata de usar HTML y CSS para cambiar el tamaño, ocultar, reducir o ampliar automáticamente un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos):

Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2> Imagen receptiva </h2>
<p> Cuando la propiedad de ancho de CSS se establece en un valor porcentual, la imagen aumentará y disminuirá al cambiar el tamaño de la ventana del navegador. Cambie el tamaño de la ventana del navegador para ver el efecto. </p>

<img src="https://www.agernic.com/uploads/espana-imagenes.jpg" style="width:98%; margin-left:auto; margin-right:auto">

<h3> Imagen receptiva </h3>
<p> "max-width: 100%" evita que la imagen sea más grande que su tamaño original. Sin embargo, si reduce el tamaño de la ventana del navegador, la imagen seguirá reduciéndose. </p>
<p> Cambie el tamaño de la ventana del navegador para ver el efecto. </p>

<img src="https://www.agernic.com/uploads/espana-imagenes.jpg" style="max-width:100%; height:auto; margin-left:auto; margin-right:auto">

</body>
</html>

 

Tamaño de texto adaptable - ejemplos

El tamaño del texto se puede configurar con una unidad "vw", que significa "ancho de ventana".
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1 style="font-size:10vw;">Texto adaptable</h1>
<p style = "font-size: 5vw;"> Cambie el tamaño de la ventana del
navegador para ver cómo se escala el tamaño del texto. </p>
<p style = "font-size: 5vw;"> Utilice la unidad "vw" cuando
cambie el tamaño del texto. 10vw establecerá el tamaño
en el 10% del ancho de la ventana gráfica. </p>
<p> La ventana gráfica es el tamaño de la ventana del navegador.
1vw = 1% del ancho de la ventana gráfica.
Si la ventana tiene 50 cm de ancho, 1vw mide 0,5 cm. </p>

</body>
</html>
Nota: Viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana tiene 50 cm de ancho, 1 vw es 0,5 cm.

 

Página web receptiva: ejemplo completo

Una página web receptiva debería verse bien en pantallas de escritorio grandes y en teléfonos móviles pequeños.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.container {
width: 94%;
margin-right: auto;
margin-left: auto;
}
.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:Verdana;color:#aaaaaa;">
<div class="container">
<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
<h1>Hola españa </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>Titulo</h2>
<p>CSS y HTML. La base del diseño receptivo es la combinación de HTML y CSS, dos lenguajes que controlan el contenido y el diseño.
CSS y HTML.<br /> La base del diseño receptivo es la combinación de HTML y CSS, dos lenguajes que controlan el contenido y el diseño.

</p>
</div>

<div class="right">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>
</div>
</body>
</html>

 



Etiquetas: ejemplos de diseño web receptivo con código fuente, tutorial de diseño web adaptable, cómo hacer que el sitio web sea receptivo usando css, bootstrap de diseño web receptivo, diseño web adaptable css, plantilla de diseño web adaptable, tutorial de diseño web adaptable paso a paso, ejemplos de código de diseño de página web html
Diseño Web Responsive HTML - html.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


CSS background color - opacity, gradient...
CSS flex - display: flex - CSS Flexbox L...
CSS border padding...
HTML text center horizontally and vertic...
HTML text input <input type="text"&g...
HTML link color...
How to Link CSS to HTML, external file n...
HTML link - hyperlink...
jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...