Ihre Webseite sollte gut aussehen, und einfach zu bedienen sein, und zwar unabhängig von dem Gerät.
Was ist Responsive Web Design?
Responsive Web Design macht Ihre Web - Seite auf allen Geräten gut aussehen (desktops, tablets, and phones) .
Responsive Web Design ist über CSS und HTML verwenden, um die Größe, verstecken, schrumpft, vergrößert, oder den Inhalt zu bewegen, um es auf jedem Bildschirm gut aussehen:
Erstellen Sie Ihre eigene Responsive Design
Eine Möglichkeit, einen ansprechenden Design zu schaffen, ist es selbst zu erstellen:
Beispiel
<!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> Versuch es selber " Mit W3.CSS
Eine weitere 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 Sie die Größe dieses ansprechende Seite!
London
London ist die Hauptstadt von England.
Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich, mit einem Großraum 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 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> Versuch es selber " Um mehr über W3.CSS erfahren wollen , lesen Sie unsere W3.CSS Tutorial .