Su página web debe quedar bien, y ser fácil de usar, independientemente del dispositivo.
¿Cuál es al diseño web?
Al diseño web hace que su página web se ve bien en todos los dispositivos (desktops, tablets, and phones) .
Al diseño web es sobre el uso de CSS y HTML para cambiar el tamaño, ocultar, reducir, ampliar, o mover el contenido para que se vea bien en cualquier pantalla:
Crear su propio diseño Responsive
Una forma de crear un diseño de respuesta, es crear usted mismo:
Ejemplo
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html> Inténtalo tú mismo " usando W3.CSS
Otra forma de crear un diseño de respuesta, es utilizar una hoja de estilos de respuesta, como W3.CSS
W3.CSS hace que sea fácil desarrollar sitios que se ven bien en cualquier tamaño; escritorio, portátil, tableta o teléfono:
W3.CSS demostración
Cambiar el tamaño de esta página de respuesta!
Londres
Londres es la capital de Inglaterra.
Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
París
París es la capital de Francia.
La zona de París es uno de los núcleos de población más grandes de Europa, con más de 12 millones de habitantes.
Tokio
Tokio es la capital de Japón.
Es el centro de la mayor área de Tokio, y el área metropolitana más poblada del mundo.
Ejemplo
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<body>
<div class="w3-container w3-orange">
<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html> Inténtalo tú mismo " Para obtener más información sobre W3.CSS, lea nuestra Tutorial W3.CSS .