DESAIN WEB RESPONSIVE
Penulisan CSS
- Inline Style
- Internal Style
- Eksternal Style
Ciri Web Responsive
- User interface-nya beradaptasi di berbagai perangkat berbeda
- Ukuran huruf, tata letak dan gambarnya beradaptasi di berbagai ukuran layar yang berbeda
- Umumnya menggunakan scrolling dan swipe untuk bernavigasi di perangkat mobile
- Lintas platform
Pengenalan CSS
- CSS (Cascading Style Sheets)
- CSS adalah kumpulan format yang digunakan untuk mengatur tampilan atau isi dari sebuah halaman web menjadi lebih fleksibel.
Web Responsive
Sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan anda pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun PC.
Praktek web responsive
1. Buat file CSS beri nama : desain.css
- Kita akan membuat ukuran desain yang akan tampil di ukuran antara 768px sampai 1920px
- Buat @media untuk mengawali desain responsive seperti dibawah ini :
@media(min-width:768px) and (max-width:1920px){
.......
}
- Selanjutnya buat CSS masih diantara { .... } sebagai berikut :
.container
{
position:relative;
width:85%;
height:500px;
margin:0 auto;
background-color:#F96417;
border:2px solid #161415;
}
- Selanjutnya buat CSS masih diantara { .... } sebagai berikut : (setelah container)
.isi1
{
margin:0;
border:0;
float:left;
width:25%;
height:100px;
background-color:#F7F2F2;
}
- Selanjutnya buat CSS masih diantara { .... } sebagai berikut : (copy dari .isi1) kemudian ubah .isi1 menjadi (.isi2, .isi3, dan .isi4)
- Selanjutnya buat CSS lagi tetapi diluar { .... } sebagai berikut:
.warnaisi{
background-color:#F96417;
padding:20px;
height:50px;
margin:4px;
border:0;
text-align:center;
font-size:40px;
}
- Selanjutnya buat CSS @media untuk resolusi 360px sampai 767px
@media(min-width:360px) and (max-width:767px){
.......
}
- Untuk isi CSS pada @media di atas silahkan anda copy dari @media sebelumnya
(container, .isi1 sampai dengan .isi4) dan ubah value masin-masing width-nya menjadi 50% pada tiap-tiap .isi1 sampai .isi4. - Selanjutnya buat CSS @media untuk resolusi 320px sampai 359px
@media(min-width:320px) and (max-width:359px){
.......
}
- Untuk isi CSS pada @media di atas silahkan anda copy dari @media sebelumnya
(container, .isi1 sampai dengan .isi4) dan ubah value masin-masing width-nya menjadi 100% pada tiap-tiap .isi1 sampai .isi4. - CSS sudah dibentuk sekarang anda buat file html beri nama index.html kemudian panggil file desain.css seperti berikut :
<html>
<head>
<meta charset="utf-8">
<title>Responsive web</title>
<link href="desain.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div cass="isi1">
<div class="warnaisi">A</div>
</div>
<div cass="isi1">
<div class="warnaisi">B</div>
</div>
<div cass="isi1">
<div class="warnaisi">C</div>
</div>
<div cass="isi1">
<div class="warnaisi">D</div>
</div>
</div>
</body>
</html>
- Simpan dan buka file index.html diatas pada web browser dan lihat hasilnya, jika anda ingin melihat bagaimana web itu responsive coba anda cari pada pojok atas browser anda,
Open menu > Developer > Responsive Design Mode
Oke, sekian dulu tutorialnya. semoga pada paham dan berhasil, thanks.
0 komentar:
Posting Komentar