CSS RESPONSIVE TEMPLATE – Penggunaan media screen pada css template


what-is-responsive-web-design-700x466

Responsive :
Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan jenis device yang digunakan, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone , akan berbeda tampilannya. Web Design dengan design Responsiive untuk melakukan test tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, hanya cukup dengan meminimize browser kedalam ukuran mobile device yang diinginkan, sudah dapat melihat tampilan website kita pada layar mobile device.

Apa “Query” yang digunakan pada CSS ?

Contoh :

Jika ukuran lebar device kurang dari 500px, maka background akan menjadi biru :

@media only screen and (max-width: 500px) {
    body {
background-color: lightblue;
}
}

Tambahkan Breakpoint

Sebelumnya pasti kita membuat sebuah halaman web dengan baris dan kolom saja, entah menggunakan table atau div, dan itu tidak responsif, tapi itu tidak terlihat baik pada layar kecil seperti handphone.

QueryMedia” pada css dapat membantu, Kita bisa menambahkan breakpoint di mana bagian-bagian tertentu dari desain akan berperilaku berbeda di setiap sisi breakpoint.

Menggunakan querymedia” untuk menambahkan breakpoint di 768px:

CONTOH

Jika lebar browser lebih kecil dari 768px, maka lebar kolom akan menjadi 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
[class*=”col-“] {
width: 100%;
}
}

Ini mungkin tampak aneh bahwa kita memiliki dua set kelas identik, namun memberikan kita kesempatan dalam HTML, untuk memutuskan apa yang akan terjadi dengan kolom pada setiap breakpoint:

CONTOH :

Untuk desktop:

Yang pertama dan bagian ketiga akan baik rentang 3 kolom masing-masing. Bagian tengah akan span 6 kolom.

Untuk tablet:

Bagian pertama akan span 3 kolom, kedua akan span 9, dan bagian ketiga akan ditampilkan di bawah dua bagian pertama, dan itu akan span 12 kolom:

Orientasi: Portrait / Landscape

Query Media juga dapat digunakan untuk mengubah tata letak halaman tergantung pada orientasi browser.

Anda dapat memiliki satu set properti CSS yang hanya akan berlaku ketika jendela browser lebih lebar dari ketinggian, yang disebut “Landscape” orientasi:

Contoh

Halaman web akan memiliki latar belakang lighblue jika orientasi saya dalam modus lansekap:

@media only screen and (orientasi: landscape) {
body {
background-color: lightblue;
}
}

CSS RESPONSIVE TEMPLATE – Penggunaan media screen pada css template

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s