Hay muchos marcos de CSS existentes que ofrecen el diseño de respuesta.
Ellos son libres, y fácil de usar.
usando W3.CSS
Una gran manera de crear un diseño de respuesta es utilizar una hoja de estilos de respuesta, al igual que W3.CSS
W3.CSS hace que sea fácil de desarrollar sitios que se ven bien en cualquier tamaño; escritorio, portátil, tableta o teléfono:
demostración W3.CSS
Cambiar el tamaño de la página para ver los responsivenes!
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 centros 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 orange">
<h1>w3ii 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 .
Oreja
Otro marco popular es Bootstrap, que utiliza HTML, CSS y jQuery para hacer que las páginas web sensibles.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div
class="jumbotron">
<h1>My First Bootstrap Page</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> Inténtalo tú mismo " Para aprender más acerca de Bootstrap, vaya a nuestro Tutorial Bootstrap .
Esqueleto
Otro marco popular es esquelética, que sólo utiliza CSS para hacer que las páginas web sensibles.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Skeleton
Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="skeleton.css">
<link rel="stylesheet" href="normalize.css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600"
rel="stylesheet" type="text/css">
</head>
<body>
<div
class="container">
<h1>My First Skeleton Page</h1>
<div
class="row">
<div class="one column">
...
</div>
<div class="eleven
columns">
...
</div>
</div>
<div class="row">
<div
class="one-half column">
...
</div>
<div class="one-half column">
...
</div>
</div>
</div>
</body>
</html> Inténtalo tú mismo "