Membuat Media Responsive Dengan CSS

Media adalah sebuah alat atau perangkat untuk menampilkan sebuah informasi baik dalam bentuk digital atau dalam kenyataan, namun yang dimaksud disini adalah media layar yang berbentuk apa saja baik smartphone, tablet, laptop atau komputer yang ada layarnya untuk menampilkan sebuah informasi, responsive (responsif) adalah bentuk media yang bisa berpindah-pindah bentuk saat dibuka pada perangkat yang berbeda.

Media responsive cuma bisa diatur meggunakan CSS3 atau dengan kata lain media rule, selain itu pengaturan perintah css untuk media responsif ini juga dikatakan media query atau media type yang bisa dibuat css embeded atau css external, berikut ini adalah langkah-langkah pembuatan media responsif yang bisa anda lakukan dan ikuti.

Untuk pertama-tama yang perlu anda buat adalah sebuah html dan css atau juga bisa anda gabungkan keduanya, html yang kita gunakan adalah versi 5, selain itu juga Anda perlu membuat dokumen html bisa berjalan pada perangkat mobile, jika browser anda tidak mendukung html5 maka Anda bisa menggunakan framework untuk mengatasi browser anda seperti html5shiv.min.js dan respond.js juga jika browser Anda tidak mendukung css maka Anda bisa menggunakan framework normalize.css atau yang lebih jelas seperti dibawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Media Responsive</title>
 	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
  </head>
  <body>
 
  </body>
</html>

Setelah itu kita bisa membuat ukuran yang biasa digunakan pada berbaga perangkat seperti umumnya smartphone menggunakan ukuran 320, 480 dan 485, untuk tablet biasa mengunakan ukuran 768, 1024, untuk komputer dan laptop biasanya ukuran yang digunakan adalah 1024, 1300, atau 1600 bahkan lebih besar dari itu, semua ukuran itu digunakan pada lebar layar atau width, cara menggunakan pada css seperti perintah dibawah ini.

@media only screen and (max-width: 767px) {
	body {
		background-color: firebrick;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	body {
		background-color: lightgreen;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1119px) {
	body {
		background-color: royalblue;
	}
}
@media only screen and (min-width: 1200px) {
	body {
		background-color: darkorange;
	}
}

Pada sintaks diatas saya membuat bentuk saat dibuka lewat perangkat yang ukuran layar dibawah 767 maka akan muncul warna body merah, jika ukuran layar minimal 768 dan maksimal 991 maka akan muncul warna body hijau cerah, jika ukuran layar minimal 992 dan maksimal 1119 maka akan muncul warna biru muda, dan jika ukuran layar lebih besar sama dengan dari 1200 maka akan muncul warna body orange gelap. berikut ini adalah kode penuhnya

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Media Responsive</title>
 	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style type="text/css">
    @media only screen and (max-width: 767px) {
		body {
		    background-color: firebrick;
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 991px) {
		body {
		    background-color: lightgreen;
		}
	}
	@media only screen and (min-width: 992px) and (max-width: 1119px) {
		body {
		    background-color: royalblue;
		}
	}
	@media only screen and (min-width: 1200px) {
		body {
		    background-color: darkorange;
		}
	}
    </style>
    
  </head>
  <body>
 
  </body>
</html>

Sekian semoga bermanfaat untuk anda yang berkunjung, jika ada pertanyaan bisa anda tanyakan pada forum dalam website ini.