Există mai multe cadre CSS existente, care oferă un design receptivă.
Acestea sunt gratuite, și ușor de utilizat.
Utilizarea W3.CSS
O modalitate foarte bună de a crea un design receptiv este de a utiliza o foaie de stil receptiv, cum ar fi W3.CSS
W3.CSS face ușor de a dezvolta site-uri care arata frumos la orice dimensiune; desktop, laptop, tabletă sau telefon:
W3.CSS Demo
Redimensionarea pagina pentru a vedea responsivenes!
Londra
Londra este capitala Angliei.
Acesta este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.
Paris
Paris este capitala Frantei.
Zona din Paris este una dintre cele mai mari centre de populație din Europa, cu mai mult de 12 milioane de locuitori.
Tokyo
Tokyo este capitala Japoniei.
Acesta este centrul Tokyo zona Greater, și zona metropolitană cel mai populat din lume.
Exemplu
<!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> Încearcă - l singur » Pentru a afla mai multe despre W3.CSS, citiți Tutorial W3.CSS .
bootstrap
Un alt cadru popular este Bootstrap, foloseste HTML, CSS și jQuery pentru a face pagini web receptiv.
Exemplu
<!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> Încearcă - l singur » Pentru a afla mai multe despre Bootstrap, du - te la nostru Tutorial Bootstrap .
Schelet
Un alt cadru popular este scheletul, se folosește numai CSS pentru a face pagini web receptiv.
Exemplu
<!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> Încearcă - l singur »