Es gibt viele vorhandene CSS-Frameworks, das Responsive Design bieten.
Sie sind frei, und einfach zu bedienen.
Mit W3.CSS
Eine gute Möglichkeit , einen ansprechenden Design zu schaffen , ist eine ansprechende Stylesheet zu verwenden, wie W3.CSS
W3.CSS macht es einfach, Websites zu entwickeln, die in jeder Größe schön aussehen; Desktop, Laptop, Tablet oder Telefon:
W3.CSS Demo
Ändern der Größe der Seite, um die responsivenes sehen!
London
London ist die Hauptstadt von England.
Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich, mit einem Ballungsgebiet von mehr als 13 Millionen Einwohnern.
Paris
Paris ist die Hauptstadt von Frankreich.
Die Gegend Paris ist einer der größten Ballungszentren in Europa, mit mehr als 12 Millionen Einwohnern.
Tokio
Tokio ist die Hauptstadt von Japan.
Es ist das Zentrum des größeren Tokyo-Bereich, und die bevölkerungsreichste Metropole der Welt.
Beispiel
<!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> Versuch es selber " Um mehr über W3.CSS erfahren wollen , lesen Sie unsere W3.CSS Tutorial .
Bootstrap
Ein weiteres beliebtes Framework Bootstrap, verwendet es HTML, CSS und jQuery ansprechende Webseiten zu machen.
Beispiel
<!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> Versuch es selber " Um mehr über Bootstrap erfahren, gehen Sie auf unsere Bootstrap Tutorial .
Skelett
Ein weiterer beliebter Rahmen ist Skelett, verwendet es nur CSS ansprechende Webseiten zu machen.
Beispiel
<!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> Versuch es selber "