Ada banyak CSS Frameworks ada yang menawarkan Desain Responsif.
Mereka bebas, dan mudah digunakan.
menggunakan W3.CSS
Sebuah cara yang bagus untuk membuat desain responsif adalah dengan menggunakan style sheet responsif, seperti W3.CSS
W3.CSS membuatnya mudah untuk mengembangkan situs yang terlihat bagus di ukuran; desktop, laptop, tablet, atau telepon:
W3.CSS Demo
Mengubah ukuran halaman untuk melihat responsivenes!
London
London adalah ibukota Inggris.
Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
Paris
Paris adalah ibu kota Prancis.
Wilayah Paris adalah salah satu pusat populasi terbesar di Eropa, dengan lebih dari 12 juta penduduk.
Tokyo
Tokyo adalah ibu kota Jepang.
Ini adalah pusat Greater Tokyo Area, dan daerah metropolitan terpadat di dunia.
Contoh
<!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> Cobalah sendiri " Untuk mempelajari lebih lanjut tentang W3.CSS, baca W3.CSS Tutorial .
bootstrap
Kerangka populer lain adalah Bootstrap, menggunakan HTML, CSS dan jQuery untuk membuat halaman web responsif.
Contoh
<!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> Cobalah sendiri " Untuk mempelajari lebih lanjut tentang Bootstrap, pergi ke kami Bootstrap Tutorial .
Kerangka
Kerangka lain yang populer adalah Skeleton, hanya menggunakan CSS untuk membuat halaman web responsif.
Contoh
<!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> Cobalah sendiri "