19
Kode Program 1 Penggalan Perintah CSS untuk Menentukan Ratio Ukuran Font
Kode Program 1 menjelaskan bahwa ukuran font pada body adalah 14px dan target dari ukuran untuk tag headline h1 adalah 28px. Maka dapat dihitung
dengan menggunakan rumus : target context = result 28px 14px = 2em. Satuan em pada result merupakan perbandingan antara ukuran context dalam hal
ini ukuran tag body dengan ukuran headline h1 yang diinginkan yaitu 28px. Sehingga ketika tagheadline h1 digunakan akan menghasilkan teks dengan ukuran
sama dengan 28px untuk ukuran body 14px. Ukuran tag headline h1 akan berubah sebesar 2 kali ukuran font pada body.
Selain ukuran font penerapan flexible grid-based layout dapat dilihat padadimensi ukuran grid untuk tiap elemen div. Kode program 2 merupakan
contoh dari perhitungan dimensi ukuran elemen body, navbar dan content.
Kode Program 2 Penggalan Perintah CSS untuk Menentukan Ratio Dimensi side font
Penggalan Kode Program 2 menjelaskan bahwa ukuran dari body menggunakan id page-wrapper, navbar menggunakan class .side-nav dan content menggunakan id
page-wrapper. Untuk id page-wrapper memiliki atribut width yang bernilai 100, artinya lebar body sama dengan lebar screen window. Untuk class .side-
nav bernilai 225px dari 100 body. Sedangkan ukuran id page-wrapper bernilai 100 dari 100 body
– 225px.
1.
page-wrapper {
2. width: 100;
3. padding: 0;
4. background-color: fff;}
5. .side-nav {
6. position: fixed;
7. top: 51px;
8. left: 225px;
9. width: 225px;
10. margin-left: -225px;
11. …}
12. page-wrapper {
13. width: 100;
14. padding: 0;
15. background-color: fff;}
1. body {
2. font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
3. font-size: 14px;
4. line-height: 1.42857143;
5. color: 333;
6. background-color: fff;}
7. …
8. h1 {
9. margin: .67em 0;
10. font-size: 2em;}
20
1 2 3
Gambar 15 1Ukuran Body2 Ukuran Navbar 3 Ukuran Content pada Desktop 1349
Media queries
adalah mekanisme
pengelompokan media
untuk mengidentifikasi media yang digunakan untuk menampilkan halaman web tidak
hanya berdasarkan pada jenis type media tapi berdasarkan karakteristik perangkat dan browser. Media queries merupakan pengembangan dari media type
pada CSS2 yang memiliki masalah dalam pengelompokan jenis media. Pemanfaatan bootstrap pada penelitian ini memiliki 5 jenis media queries yang
dapat digunakan untuk 5 jenis layout. Jenis-jenis media queries tersebut dapat dilihat pada Tabel 1.
Tabel 1 Pengelompokan Media Queries pada Sistem
No Label
Layout Width
1 Large Display
1200px 2
Default 992px
3 Potrait Tablet
768px 4
PhoneTablet 767px
5 Phone
480px Pengelompokan media queries tersebut dapat dilihat pada bootstrap.css.
Pengelompokan ukuran tersebut digunakan untuk membantu mengubah tampilan responsive web pada ukuran layar tertentu. Penerapan media queries pada sistem
dapat dilihat pada penggalan Kode Program 3.
Kode Program 3 Penggalan Perintah CSS Pengelompokan Media Queries
Kode Program 3 merupakan pengelompokan jenis media queries yang digunakan pada sistem. Media queries memiliki 2 komponen utama, yaitu media type dan
query. Media type pada kode program 1 adalah screen. Sedangkan contoh query adalah width: 1170px. Width dapat disebut sebagai feature dan 1170px merupakan
1. media max-device-width: 480px and orientation: landscape {
