Halaman web Anda harus terlihat baik, dan mudah digunakan, terlepas dari perangkat.
Apa Desain Web Responsif?
Desain Web Responsif membuat halaman web Anda terlihat baik pada semua perangkat (desktops, tablets, and phones) .
Desain Web Responsif adalah tentang menggunakan CSS dan HTML untuk mengubah ukuran, menyembunyikan, menyusut, memperbesar, atau memindahkan konten untuk membuatnya terlihat bagus di layar setiap:
Buat Desain Responsif Sendiri
Salah satu cara untuk membuat desain responsif, adalah untuk menciptakan sendiri:
Contoh
<!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> Cobalah sendiri " menggunakan W3.CSS
Cara lain untuk membuat desain responsif, adalah dengan menggunakan style sheet responsif, seperti W3.CSS
W3.CSS membuatnya mudah untuk mengembangkan situs yang terlihat bagus pada ukuran apapun; desktop, laptop, tablet, atau telepon:
W3.CSS Demo
Mengubah ukuran halaman responsif ini!
London
London adalah ibu kota 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 dari 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 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> Cobalah sendiri " Untuk mempelajari lebih lanjut tentang W3.CSS, baca W3.CSS Tutorial .