Diseño Web Responsivo - Frameworks
Hay muchos marcos CSS gratuitos que ofrecen diseño receptivo.
Usando W3.CSS
Una excelente manera de crear un diseño receptivo es usar una hoja de estilo receptiva, como W3.CSS
¡W3.CSS facilita el desarrollo de sitios que se ven bien en cualquier tamaño!
Demostración de W3.CSS
¡Cambie el tamaño de la página para ver la capacidad de respuesta!
Londres
Londres es la ciudad 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.
El área de París es uno de los mayores núcleos de población de Europa, con más de 12 millones de habitantes.
tokio
Tokio es la capital de Japón.
Es el centro del área metropolitana 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="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div
class="w3-container w3-blue">
<h1>W3Schools 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>
Para obtener más información sobre W3.CSS, lea nuestro Tutorial de W3.CSS .
Oreja
Otro marco popular es Bootstrap. Utiliza HTML y CSS para crear páginas web receptivas:
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white
text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize
this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Para obtener más información sobre Bootstrap, vaya a nuestro tutorial de Bootstrap .
¿Alguna vez has oído hablar de W3Schools Spaces ? Aquí puede crear su sitio web desde cero o utilizar una plantilla y alojarlo de forma gratuita.
Comience gratis ❯* No se requiere tarjeta de crédito