Duyarlı Tasarım sunan birçok mevcut CSS Çerçeveleri vardır.
Onlar ücretsiz ve kullanımı kolaydır.
W3.CSS kullanma
Duyarlı bir tasarıma oluşturmak için harika bir yoldur gibi duyarlı stil sayfasını kullanmaktır W3.CSS
W3.CSS kolay herhangi bir boyutta güzel görünmesi siteleri geliştirmek için yapar; masaüstü, dizüstü bilgisayar, tablet veya telefon:
W3.CSS Demosu
tepki verme görmek için sayfayı yeniden boyutlandırma!
Londra
Londra İngiltere'nin başkentidir.
13 milyonun üzerinde nüfuslu bir metropol alana sahip İngiltere'deki en kalabalık kentidir.
Paris
Paris, Fransa'nın başkentidir.
Paris alanı 12 milyondan fazla nüfusu ile Avrupa'nın en büyük nüfus merkezleri biridir.
Tokyo
Tokyo Japonya başkentidir.
Bu Greater Tokyo Alanının merkezi ve dünyanın en kalabalık metropol alandır.
Örnek
<!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> Kendin dene " W3.CSS hakkında daha fazla bilgi edinmek için okumak W3.CSS Eğitimi .
çizme atkısı
Bir diğer popüler Çerçeve yanıt veren Web sayfaları yapmak HTML, CSS ve jQuery kullanır Bootstrap olduğunu.
Örnek
<!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> Kendin dene " Bootstrap hakkında daha fazla bilgi edinmek için gidin Önyükleme Öğreticisi .
iskelet
Bir diğer popüler çerçeve yanıt veren Web sayfaları yapmak sadece CSS kullanır İskelet olduğunu.
Örnek
<!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> Kendin dene "