Cara Menggunakan CSS Media Queries

Hallo sahabat dumenity berjumpa lagi dalam tutorial dumetschool, pada tutorial kali ini saya akan berbagi kepada sahabat dumenity tentang cara menggunakan CSS media queries, CSS media queries adalah CSS yang digunakan untuk mengatur CSS berdasarkan layar tampilan web, atau berdasarkan ukuran layar baik itu lebar, tingggi. Banyak yang dapat digunakan dari CSS media queriesÂ seperti, mengatur warna backgroun, warna text (color), ukuran lebar.

CSS media queries digunakan untuk membatasiÂ ruang CSS, artinya CSS yang kita buat melalui media queries ini hanya berjalan di ukuran labar layar tertentu, misalnya:

Dari contoh script di atas, dapat kita lihat bahwa property CSS background red pada article hanya berlaku pada ukuran maksimal 600px, ketika tampilan web lebih dari 600px maka background tersebut tidak akan berlaku lagi. Oke sahabat dumenity untuk lebih jelasnya silahkan perhatikan contoh di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title> Cara Menggunakan CSS Media Queries  </title>
	<link rel="stylesheet" type="text/css" href="artikel19_08.css">
</head>
<body>
	<div class="container">
		<header>
			<h1>Cara Menggunakan CSS Media Queries</h1>
		</header>
		
		<article>

			<h1>Welcome to my site</h1>

			<div class="left">
				<img src="apple.png">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
			<div class="right">
				<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
			</div>
		</article>
		<footer>
			<p>Copyright &copy 2014</p>
		</footer>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title> Cara Menggunakan CSS Media Queries </title>

</head>

<body>

<h1>Cara Menggunakan CSS Media Queries</h1>

</header>

<h1>Welcome to my site</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

</div>

</article>

<p>Copyright &copy 2014</p>

</footer>

</div>

</body>

</html>

Dari contoh script HTML di atas nantinya saya akan membuat CSS khusus menggunakan media queries, dimana saya akan merubah warna background menjadi merah ketika pada ukuran maksimal 600px seperti di bawah ini:

Dan CSS yang saya gunakan seperti di bawah ini:

Dan yang kedua saya akan merubah tampilan website di atas menjadi 2 kolom pada bagian article ketika berada pada ukuran lebih dari 600px.

maka hasilnya akan seperti di bawah ini:

CSS website di atas secara keselurahan adalah sebagai berikut :

* {padding:0; margin:0;}

@media screen and (max-width: 600px) {
  article{
  	background :red !important;
  	
  }
}

.container {
	width:900px; 
	margin:auto;
}

header { 
	background: green; 
	color:white; 
	height: 80px;
}
header h1 {
	margin-left:20px; 
	line-height: 80px
}



@media screen and (min-width: 600px) {
	article {
		background: white;
		overflow: hidden
	}
	article .left {
		width: 410px;
		float: left;
		padding: 20px 20px;
		text-align: justify;
	}
	article .right {
		width: 410px; 
		float: right;
		padding: 20px 20px;
		text-align: justify;
	}
}

article img {
	float:left;
	padding-right: 10px
}
article h1 {
	padding: 20px
}


footer {
    background: black;
    color: white;
    height: 40px;
}
footer p {
	text-align: center;
	line-height: 40px
}

* {padding:0; margin:0;}

@media screen and (max-width: 600px) {

article{

background :red !important;

}

.container {

width:900px;

margin:auto;

}

header {

background: green;

color:white;

height: 80px;

}

header h1 {

margin-left:20px;

line-height: 80px

}

@media screen and (min-width: 600px) {

article {

background: white;

overflow: hidden

}

article .left {

width: 410px;

float: left;

padding: 20px 20px;

text-align: justify;

}

article .right {

width: 410px;

float: right;

padding: 20px 20px;

text-align: justify;

}

article img {

float:left;

padding-right: 10px

}

article h1 {

padding: 20px

}

footer {

background: black;

color: white;

height: 40px;

}

footer p {

text-align: center;

line-height: 40px

}

Oke lebih jelasnya silahkan teman – teman copy paste script di atas dan silahkan teman – teman coba – coba sendiri, itulah tadi contoh Cara Menggunakan CSS Media Queries. Semoga bermanfaat.

Facebook DUMET School

Categories