Il y a beaucoup de cadres CSS existants qui offrent Responsive Design.
Ils sont libres, et facile à utiliser.
Utilisation de W3.CSS
Une excellente façon de créer un design réactif est d'utiliser une feuille de style sensible, comme W3.CSS
W3.CSS il est facile de développer des sites qui ont l'air agréable à toute taille; bureau, ordinateur portable, tablette ou téléphone:
W3.CSS Demo
Redimensionner la page pour voir les responsivenes!
Londres
Londres est la capitale de l'Angleterre.
Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.
Paris
Paris est la capitale de la France.
La région parisienne est l'un des plus grands centres de population en Europe, avec plus de 12 millions d'habitants.
Tokyo
Tokyo est la capitale du Japon.
Il est le centre de la région du Grand Tokyo, et la région métropolitaine la plus peuplée du monde.
Exemple
<!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> Essayez - le vous - même » Pour en savoir plus sur W3.CSS, lisez notre Tutoriel W3.CSS .
Bootstrap
Un autre cadre populaire est Bootstrap, il utilise HTML, CSS et jQuery pour faire des pages web sensibles.
Exemple
<!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> Essayez - le vous - même » Pour en savoir plus sur Bootstrap, visitez notre Tutoriel Bootstrap .
Squelette
Un autre cadre populaire est Skeleton, il utilise seulement CSS pour rendre les pages Web sensibles.
Exemple
<!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> Essayez - le vous - même »